:root {
  color-scheme: light;
  --ink: #173132;
  --muted: #617171;
  --paper: #fffdf8;
  --ground: #f2efe7;
  --line: #d9dfd9;
  --teal: #147d78;
  --teal-dark: #0b5d59;
  --teal-soft: #d9f0e9;
  --purple: #7553a6;
  --purple-soft: #eee6f8;
  --coral: #e26d52;
  --coral-soft: #fae7df;
  --gold: #d49b36;
  --gold-soft: #fff0c9;
  --danger: #b7443a;
  --danger-soft: #fff0ed;
  --success: #197150;
  --success-soft: #e1f4e9;
  --shadow: 0 24px 70px rgba(30, 56, 54, 0.12);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 15px;
  --focus: 0 0 0 4px rgba(20, 125, 120, 0.2);
  font-family: Inter, Aptos, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
}

/* FRA20 owner-approved same-denominator subtraction */
.fra20-context-visual {
  width: min(100%, 860px);
}

.fra20-visual {
  --fra20-ink: #18313f;
  --fra20-blue: #176b87;
  --fra20-water: #54b8d4;
  --fra20-water-dark: #17799a;
  --fra20-remove: #d56b49;
  --fra20-paper: #f8fbfc;
  color: var(--fra20-ink);
  width: 100%;
}

.fra20-fraction {
  display: inline-grid;
  grid-template-rows: auto 2px auto;
  min-width: 2.1rem;
  place-items: center;
  vertical-align: middle;
  line-height: 1;
}

.fra20-fraction i {
  width: 100%;
  height: 2px;
  background: currentColor;
}

.fra20-fraction b {
  padding: 0.16rem 0.3rem;
  font: inherit;
  font-weight: 760;
}

.fra20-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.45rem, 2vw, 1rem);
  margin: 1rem auto 0;
  font-size: clamp(1.35rem, 4vw, 2.2rem);
  font-weight: 760;
}

.fra20-question-mark,
.fra20-missing-box {
  display: inline-grid;
  min-width: 2.3rem;
  min-height: 2.3rem;
  place-items: center;
  border: 2px dashed #7d9099;
  border-radius: 0.55rem;
  background: #fff;
}

.fra20-over-denominator {
  margin-left: -0.7rem;
}

.fra20-strip {
  display: grid;
  grid-template-columns: repeat(var(--fra20-parts), minmax(0, 1fr));
  width: min(100%, 720px);
  min-height: 6.2rem;
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid var(--fra20-ink);
  border-radius: 0.8rem;
  background: #fff;
}

.fra20-strip.is-vertical {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--fra20-parts), minmax(0, 1fr));
  width: min(17rem, 52vw);
  min-height: 25rem;
  max-height: 31rem;
}

.fra20-cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 3.5rem;
  place-items: center;
  border-right: 2px solid rgba(24, 49, 63, 0.68);
  background: #fff;
  transition: background-color 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.fra20-strip.is-vertical .fra20-cell {
  min-height: 0;
  border-right: 0;
  border-bottom: 2px solid rgba(24, 49, 63, 0.68);
}

.fra20-cell:last-child {
  border-right: 0;
  border-bottom: 0;
}

.fra20-cell span {
  position: relative;
  z-index: 2;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 760;
  color: #173645;
}

.fra20-cell.is-selected {
  background: linear-gradient(145deg, rgba(84, 184, 212, 0.98), rgba(84, 184, 212, 0.78));
}

.fra20-cell.is-selected::after {
  content: "";
  position: absolute;
  inset: 0.25rem;
  border: 2px solid rgba(23, 107, 135, 0.62);
  border-radius: 0.22rem;
}

.fra20-cell.is-removed {
  background-color: #f4c5b3;
  background-image: repeating-linear-gradient(135deg, rgba(151, 54, 31, 0.75) 0 3px, transparent 3px 9px);
}

.fra20-cell.is-drained {
  opacity: 0.34;
  background-color: #f8f3ef;
}

.fra20-cell[role="button"] {
  cursor: pointer;
}

.fra20-cell[role="button"]:focus-visible {
  z-index: 4;
  outline: 4px solid #8c4dd0;
  outline-offset: -4px;
}

.fra20-cell.is-tapped {
  box-shadow: inset 0 0 0 4px #173645;
  transform: translateY(-2px);
}

.fra20-tank-scene,
.fra20-direction,
.fra20-countback,
.fra20-compact-method,
.fra20-symbolic,
.fra20-context,
.fra20-model-options,
.fra20-repair,
.fra20-cell-tap,
.fra20-handoff {
  width: 100%;
  padding: clamp(0.75rem, 2vw, 1.35rem);
  border: 1px solid rgba(24, 49, 63, 0.14);
  border-radius: 1.25rem;
  background: linear-gradient(155deg, #ffffff, #edf7fa);
  box-shadow: 0 1rem 2.3rem rgba(24, 49, 63, 0.09);
}

.fra20-tank-scene {
  display: grid;
  grid-template-columns: minmax(8rem, 0.65fr) minmax(12rem, 1fr) minmax(10rem, 0.8fr);
  gap: 1.2rem;
  align-items: center;
}

.fra20-tank-label {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.55rem 0.8rem;
  align-items: center;
  text-align: left;
}

.fra20-tank-label strong {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--fra20-ink);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
}

.fra20-tank-label span {
  font-size: 1.15rem;
  font-weight: 780;
}

.fra20-tank-shell {
  position: relative;
  justify-self: center;
  padding: 0.7rem 0.5rem 0.5rem;
  border: 4px solid var(--fra20-ink);
  border-top: 0;
  border-radius: 0 0 1.2rem 1.2rem;
  background: rgba(255, 255, 255, 0.8);
}

.fra20-tank-rim {
  position: absolute;
  top: -0.2rem;
  left: -0.6rem;
  right: -0.6rem;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--fra20-ink);
}

.fra20-student-claim {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  padding: 0.9rem;
  border: 2px solid #b84c36;
  border-radius: 0.9rem;
  background: #fff6f2;
  color: #7f2c1d;
}

.fra20-student-claim small {
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fra20-student-claim > span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.15rem;
}

.fra20-invariant,
.fra20-denominator-anchor,
.fra20-cell-tap > p,
.fra20-model-options > p {
  grid-column: 1 / -1;
  margin: 0.85rem 0 0;
  text-align: center;
}

.fra20-direction-cards,
.fra20-method-row,
.fra20-structure-chips,
.fra20-route-contrast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.fra20-direction-cards article,
.fra20-method-row span,
.fra20-method-row strong,
.fra20-structure-chips span,
.fra20-route-contrast article {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(24, 49, 63, 0.18);
  border-radius: 0.75rem;
  background: #fff;
}

.fra20-remove-arrow {
  color: #9b3e28;
  font-size: 1.05rem;
  font-weight: 800;
}

.fra20-direction > p {
  text-align: center;
  font-weight: 750;
}

.fra20-countback-values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  font-size: clamp(1.2rem, 3vw, 1.75rem);
}

.fra20-countback-values b,
.fra20-countback-values strong {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #95a9b1;
}

.fra20-countback-values strong {
  border-color: var(--fra20-blue);
  background: #d9f3f8;
}

.fra20-context-label,
.fra20-model-source > strong,
.fra20-model-result > strong {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.fra20-model-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.fra20-model-options > p {
  align-self: center;
}

.fra20-model-source,
.fra20-model-result {
  padding: 0.8rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.78);
}

.fra20-working {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.fra20-working li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border-left: 4px solid var(--fra20-blue);
  border-radius: 0.45rem;
  background: #fff;
  animation: fra20-working-in 320ms ease both;
  animation-delay: calc(var(--fra20-step) * 130ms);
}

.fra20-working li span {
  color: var(--fra20-blue);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.fra20-working li b {
  font-weight: 650;
}

.fra20-tap-status {
  margin-top: 0.7rem;
  text-align: center;
  font-weight: 720;
}

.fra20-handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 15rem;
}

.fra20-handoff > span,
.fra20-handoff > strong {
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--fra20-blue);
}

.fra20-handoff > div {
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr) auto;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.fra20-handoff > div i {
  height: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fra20-blue) 55%, #d5e0e4 55%);
}

.math-canvas[data-active-cue^="hook-c"] .fra20-tank-shell,
.math-canvas[data-active-cue^="t1-c"] .fra20-direction,
.math-canvas[data-active-cue^="t2-c"] .fra20-countback,
.math-canvas[data-active-cue^="t3-c"] .fra20-compact-method,
.math-canvas[data-active-cue^="r-"] .fra20-repair {
  box-shadow: 0 0 0 4px rgba(23, 107, 135, 0.22), 0 1rem 2.3rem rgba(24, 49, 63, 0.09);
}

@keyframes fra20-working-in {
  from { opacity: 0; transform: translateY(0.45rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 620px) {
  .fra20-tank-scene {
    grid-template-columns: 1fr;
  }

  .fra20-tank-label {
    justify-self: center;
  }

  .fra20-strip {
    min-height: 4.8rem;
  }

  .fra20-strip.is-vertical {
    width: min(13rem, 62vw);
    min-height: 18rem;
    max-height: 22rem;
  }

  .fra20-cell {
    min-height: 2.7rem;
  }

  .fra20-model-options {
    grid-template-columns: 1fr;
  }

  .fra20-equation {
    gap: 0.35rem;
  }

  .fra20-working li {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fra20-cell,
  .fra20-working li {
    transition: none;
    animation: none;
  }
}

/* FRA-17 owner-approved same-denominator runtime */
.fra17-context-visual {
  width: min(100%, 760px);
  color: #14213d;
}

.fra17-visual {
  --fra17-blue: #2768c7;
  --fra17-amber: #e9a72f;
  --fra17-ink: #14213d;
  --fra17-line: #8ea1b8;
  --fra17-paper: #f7fbff;
  width: 100%;
  display: grid;
  place-items: center;
}

.fra17-fraction {
  display: inline-grid;
  grid-template-rows: auto 2px auto;
  min-width: 2.2rem;
  place-items: center;
  vertical-align: middle;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fra17-fraction > b {
  padding: .15rem .35rem;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
}

.fra17-fraction > i {
  width: 100%;
  height: 2px;
  background: currentColor;
}

.fra17-strip {
  width: min(100%, 650px);
  min-height: clamp(52px, 9vw, 76px);
  display: grid;
  grid-template-columns: repeat(var(--fra17-parts), minmax(0, 1fr));
  overflow: hidden;
  border: 3px solid var(--fra17-ink);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgb(20 33 61 / .08);
}

.fra17-strip.is-compact {
  min-height: 50px;
}

.fra17-cell {
  position: relative;
  min-width: 0;
  border-right: 2px solid var(--fra17-line);
  background: #fff;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.fra17-cell:last-child {
  border-right: 0;
}

.fra17-cell.first {
  background-color: #d7e7ff;
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgb(39 104 199 / .62) 7px 10px);
}

.fra17-cell.second {
  background-color: #fff0c9;
  background-image: radial-gradient(circle, rgb(150 88 0 / .72) 2px, transparent 2.5px);
  background-size: 12px 12px;
}

.fra17-cell > span {
  position: absolute;
  inset: auto 0 4px;
  text-align: center;
  font: 700 .7rem/1 system-ui, sans-serif;
  color: rgb(20 33 61 / .7);
  opacity: 0;
}

.fra17-cell[role="button"] {
  cursor: pointer;
  min-height: 54px;
  outline: 0;
}

.fra17-cell[role="button"]:focus-visible {
  z-index: 2;
  box-shadow: inset 0 0 0 4px #111, inset 0 0 0 7px #fff;
}

.fra17-cell[role="button"].is-tapped {
  transform: translateY(-4px);
  filter: saturate(1.3);
  box-shadow: inset 0 -6px 0 rgb(35 135 92 / .75);
}

.fra17-cell[role="button"].is-tapped > span {
  opacity: 1;
}

.fra17-expression {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.45rem, 2vw, 1rem);
  font-size: clamp(1.25rem, 3vw, 1.85rem);
  font-weight: 800;
}

.fra17-question-mark {
  min-width: 2.25rem;
  text-align: center;
  color: #55657a;
}

.fra17-hook,
.fra17-combine,
.fra17-symbolic,
.fra17-guided-model,
.fra17-measure,
.fra17-reasoning,
.fra17-cell-tap,
.fra17-aligned {
  width: 100%;
  display: grid;
  gap: clamp(.8rem, 2.5vw, 1.25rem);
  place-items: center;
}

.fra17-light-shell {
  width: 100%;
  display: grid;
  gap: .5rem;
}

.fra17-light-shell > span,
.fra17-aligned > div > span,
.fra17-combined-result > span {
  color: #52637a;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fra17-wrong-claim {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem 1rem;
  border: 2px solid #c83d52;
  border-radius: 12px;
  background: #fff4f6;
}

.fra17-invariant,
.fra17-denominator-anchor,
.fra17-general-rule,
.fra17-numerator-calc,
.fra17-tap-status {
  margin: 0;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: #eef5ff;
  font-weight: 750;
  text-align: center;
}

.fra17-numerator-calc,
.fra17-general-rule {
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-variant-numeric: tabular-nums;
}

.fra17-aligned > div,
.fra17-combined-result {
  width: 100%;
  display: grid;
  gap: .35rem;
  place-items: center;
}

.fra17-combined-result {
  padding-top: .65rem;
  border-top: 2px dashed #91a5be;
}

.fra17-contrast {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(170px, .65fr);
  gap: 1rem;
}

.fra17-contrast article {
  position: relative;
  min-height: 150px;
  display: grid;
  gap: .75rem;
  place-items: center;
  padding: 1rem;
  border: 2px solid #9eb0c5;
  border-radius: 16px;
  background: var(--fra17-paper);
}

.fra17-contrast .is-correct {
  border-color: #3d9770;
  background: #f1fff8;
}

.fra17-contrast .is-wrong {
  border-color: #d56a78;
  background: #fff4f6;
}

.fra17-cross {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 82px;
  height: 6px;
  border-radius: 999px;
  background: #c42f45;
  transform: translate(-50%, -50%) rotate(-28deg);
}

.fra17-cross::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  transform: rotate(56deg);
}

.fra17-measure-label {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #52637a;
}

.fra17-student-claim,
.fra17-reason-result {
  display: grid;
  gap: .45rem;
  place-items: center;
  padding: .8rem 1rem;
  border: 2px solid #9eb0c5;
  border-radius: 14px;
  background: #fff;
}

.fra17-reason-result {
  border-color: #3d9770;
  background: #f1fff8;
}

.fra17-working {
  width: min(100%, 620px);
  display: grid;
  gap: .55rem;
  margin: .2rem 0 0;
  padding: 0;
  list-style: none;
}

.fra17-working li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .7rem;
  align-items: center;
  padding: .65rem .8rem;
  border: 1px solid #a9bfd7;
  border-radius: 12px;
  background: #fff;
  animation: fra17-work-step .28s ease both;
  animation-delay: calc(var(--fra17-step) * 140ms);
}

.fra17-working li > span {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #173e74;
  color: #fff;
  font-weight: 800;
}

.fra17-handoff {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: .7rem;
  align-items: center;
  padding: 1rem;
  border-radius: 16px;
  background: #f3f7fc;
  text-align: center;
}

.fra17-tap-answer {
  display: grid;
  place-items: center;
  gap: .65rem;
}

.fra17-tap-answer p {
  margin: 0;
  color: #52637a;
  text-align: center;
}

.fra17-tap-answer .fixed-fraction-builder input {
  min-width: 64px;
}

.fra17-visual .fra17-wrong-claim,
.fra17-visual .fra17-invariant,
.fra17-visual .fra17-numerator-calc,
.fra17-visual .fra17-denominator-anchor,
.fra17-visual .fra17-general-rule {
  transition: opacity .25s ease, transform .25s ease;
}

.fra17-hook .fra17-cell.is-cue-hidden {
  background: #f7f9fc;
  opacity: .48;
}

.fra17-hook .fra17-cell.is-cue-hidden.is-cue-revealed,
.fra17-hook.is-revealed .fra17-cell.is-cue-hidden {
  opacity: 1;
}

.fra17-hook .fra17-cell.first.is-cue-revealed,
.fra17-hook.is-revealed .fra17-cell.first {
  background: repeating-linear-gradient(135deg, #ffc95d 0 6px, #fff0b8 6px 12px);
}

.fra17-hook .fra17-cell.second.is-cue-revealed,
.fra17-hook.is-revealed .fra17-cell.second {
  background-color: #a9dcff;
  background-image: radial-gradient(#1671aa 1.7px, transparent 1.7px);
  background-size: 9px 9px;
}

.fra17-cue-anchor {
  display: inline-block;
  width: 1px;
  height: 1px;
}

.fra17-visual .is-cue-active {
  animation: fra17-cue-pulse .55s ease both;
}

@keyframes fra17-cue-pulse {
  50% { filter: drop-shadow(0 0 8px rgb(33 106 183 / .42)); }
}

.feedback-initial .fra17-hook:not(.is-revealed) .fra17-wrong-claim,
.feedback-initial .fra17-hook:not(.is-revealed) .fra17-invariant,
.feedback-initial .fra17-symbolic .fra17-numerator-calc,
.feedback-initial .fra17-symbolic .fra17-denominator-anchor,
.feedback-initial .fra17-symbolic .fra17-general-rule,
.feedback-initial .fra17-combine .fra17-numerator-calc,
.feedback-initial .fra17-combine .fra17-denominator-anchor {
  opacity: 0;
  transform: translateY(7px);
}

.feedback-initial .fra17-hook:not(.is-revealed) .fra17-wrong-claim.is-cue-revealed,
.feedback-initial .fra17-hook:not(.is-revealed) .fra17-invariant.is-cue-revealed,
.feedback-initial .fra17-numerator-calc.is-cue-revealed,
.feedback-initial .fra17-denominator-anchor.is-cue-revealed,
.feedback-initial .fra17-general-rule.is-cue-revealed,
.feedback-correct .fra17-numerator-calc,
.feedback-worked .fra17-numerator-calc,
.feedback-support .fra17-numerator-calc,
.feedback-correct .fra17-denominator-anchor,
.feedback-worked .fra17-denominator-anchor,
.feedback-support .fra17-denominator-anchor,
.feedback-correct .fra17-general-rule,
.feedback-worked .fra17-general-rule,
.feedback-support .fra17-general-rule {
  opacity: 1;
  transform: none;
}

@keyframes fra17-work-step {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .fra17-context-visual {
    width: 100%;
  }

  .fra17-strip {
    min-height: 50px;
    border-width: 2px;
    border-radius: 9px;
  }

  .fra17-cell {
    border-right-width: 1px;
  }

  .fra17-contrast {
    grid-template-columns: 1fr;
  }

  .fra17-contrast article {
    min-height: 116px;
  }

  .fra17-handoff {
    grid-template-columns: 1fr;
  }

  .fra17-handoff i {
    transform: rotate(90deg);
  }

  .fra17-working li {
    grid-template-columns: 1.75rem 1fr;
    padding: .55rem .65rem;
  }

  .fra17-working li > span {
    width: 1.75rem;
    height: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fra17-visual *,
  .fra17-visual *::before,
  .fra17-visual *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .fra17-visual .is-cue-active {
    outline: 3px solid rgb(33 106 183 / .36);
    outline-offset: 3px;
  }
}

/* FRA-15: quantity-as-fraction canonical handoff */
.fra15-context-visual {
  width: min(100%, 58rem);
  margin-inline: auto;
}

.fra15-visual {
  width: 100%;
  color: #183248;
  font-variant-numeric: tabular-nums;
}

.fra15-quantity-model,
.fra15-counter-model,
.fra15-reversible,
.fra15-triptych,
.fra15-matching-model,
.fra15-handoff-model {
  border: 1px solid rgba(24, 50, 72, .14);
  border-radius: 1.2rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(239, 246, 248, .92));
  box-shadow: 0 .8rem 2.2rem rgba(38, 65, 79, .1);
  padding: clamp(1rem, 2.8vw, 1.8rem);
}

.fra15-quantity-bars {
  display: grid;
  gap: 1rem;
}

.fra15-quantity-row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 12rem) minmax(8rem, 1fr) minmax(6.8rem, auto);
  align-items: center;
  gap: .8rem;
}

.fra15-quantity-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .12rem;
  text-transform: capitalize;
}

.fra15-quantity-label strong { font-size: .95rem; }
.fra15-quantity-label span { color: #476276; font-weight: 700; }

.fra15-measure-track {
  height: 2.65rem;
  border-radius: .72rem;
  background: rgba(52, 84, 104, .08);
  padding: .28rem;
  overflow: hidden;
}

.fra15-measure-bar {
  position: relative;
  display: block;
  width: var(--bar-width);
  height: 100%;
  border-radius: .5rem;
  background: linear-gradient(90deg, #1886c9, #59b6df);
  box-shadow: inset 0 0 0 2px rgba(10, 82, 125, .14);
  transition: width .7s ease, opacity .3s ease;
}

.fra15-measure-bar::after {
  content: "";
  position: absolute;
  inset: .3rem .45rem;
  border-block: 1px dashed rgba(255, 255, 255, .65);
}

.fra15-quantity-row.role-reference .fra15-measure-bar {
  background: linear-gradient(90deg, #e3812c, #f2b152);
  box-shadow: inset 0 0 0 2px rgba(133, 70, 12, .14);
}

.fra15-role-label {
  justify-self: end;
  padding: .32rem .58rem;
  border-radius: 999px;
  background: #edf3f6;
  color: #39566a;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.fra15-phrase {
  width: fit-content;
  margin: 1rem auto .25rem;
  padding: .55rem .8rem;
  border-radius: .7rem;
  background: #eef6fb;
  font-weight: 800;
}

.fra15-fraction-build,
.fra15-counter-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 4.8rem;
  margin-top: 1rem;
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .35s ease, transform .35s ease;
}

.fra15-fraction-build.is-revealed,
.fra15-counter-result.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.cue-hook-cue-2 .fra15-visual[data-scene="HOOK"] .fra15-fraction-build,
.cue-t1-cue-4 .fra15-visual[data-scene="T1"] .fra15-fraction-build,
.cue-t4-cue-2 .fra15-visual[data-scene="T4"] .fra15-fraction-build,
.cue-t3-cue-2 .fra15-visual[data-scene="T3"] .fra15-comparison-result,
.cue-t3-cue-4 .fra15-visual[data-scene="T3"] .fra15-whole-set-result {
  opacity: 1;
  transform: translateY(0);
}

.fra15-visual[data-scene="HOOK"] .fra15-resolved-fraction,
.fra15-visual[data-scene="T4"] .fra15-simplest-fraction { opacity: 0; }
.cue-hook-cue-4 .fra15-visual[data-scene="HOOK"] .fra15-resolved-fraction,
.cue-t4-cue-4 .fra15-visual[data-scene="T4"] .fra15-simplest-fraction { opacity: 1; }

.fra15-visual[data-scene] .fra15-role-label { opacity: 0; }
.cue-hook-cue-3 .fra15-visual[data-scene="HOOK"] .role-reference .fra15-role-label,
.cue-t1-cue-2 .fra15-visual[data-scene="T1"] .role-expressed .fra15-role-label,
.cue-t1-cue-3 .fra15-visual[data-scene="T1"] .role-reference .fra15-role-label,
.cue-t4-cue-2 .fra15-visual[data-scene="T4"] .fra15-role-label { opacity: 1; }

.fra15-build-label {
  color: #526b7c;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fra15-build-arrow,
.fra15-reverse-arrow {
  color: #6a7d8b;
  font-size: 1.55rem;
  font-weight: 900;
}

.fra15-fraction {
  display: inline-grid;
  grid-template-rows: auto 2px auto;
  min-width: 2.7rem;
  text-align: center;
  vertical-align: middle;
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1.05;
}

.fra15-fraction i {
  display: block;
  width: 100%;
  min-width: 2.5rem;
  margin: .24rem 0;
  background: currentColor;
}

.fra15-simplest-fraction,
.fra15-resolved-fraction { color: #18714c; }

.fra15-conversion-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1rem;
  padding: .65rem .8rem;
  border: 1px solid #b4d7e8;
  border-radius: .7rem;
  background: #eff8fc;
}

.fra15-conversion-card span {
  color: #486677;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.fra15-counter-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.fra15-counter-group {
  position: relative;
  min-height: 10rem;
  border-radius: .9rem;
  background: rgba(20, 133, 151, .08);
  padding: .8rem;
}

.fra15-counter-group.group-1 { background: rgba(230, 144, 38, .1); }
.fra15-counter-group strong { display: block; margin-bottom: .6rem; text-transform: capitalize; }
.fra15-counter-group > span { position: absolute; top: .65rem; right: .75rem; font-weight: 900; }
.fra15-counter-group > div { display: flex; flex-wrap: wrap; gap: .42rem; }
.fra15-counter-group i {
  width: 1.42rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1590a4;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
}
.fra15-counter-group.group-1 i { background: #e69a33; }

.fra15-reference-bracket {
  width: calc(50% - .5rem);
  margin: .55rem 0 0 auto;
  border: solid #d28321;
  border-width: 0 2px 2px;
  text-align: center;
}
.fra15-reference-bracket span {
  position: relative;
  top: .65rem;
  padding: 0 .45rem;
  background: #f4f8f9;
  color: #7b4a10;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.fra15-total-label {
  width: fit-content;
  margin: 1.35rem auto 0;
  color: #6c7780;
  opacity: 0;
}
.fra15-total-label.is-revealed,
.math-canvas[class*="cue-"] .fra15-visual[data-scene] .fra15-total-label { opacity: 1; }

.fra15-reversible,
.fra15-triptych {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.fra15-reversible section,
.fra15-triptych section {
  display: grid;
  justify-items: center;
  gap: .65rem;
  min-height: 9rem;
  align-content: center;
  border-radius: .9rem;
  background: #eef5f8;
  padding: .8rem;
}
.fra15-visual[data-scene="T2"] .fra15-reversible section:last-child,
.fra15-visual[data-scene="T5"] .fra15-triptych section { opacity: 0; }
.cue-t2-cue-2 .fra15-visual[data-scene="T2"] .fra15-reversible section:last-child,
.cue-t5-cue-2 .fra15-visual[data-scene="T5"] .fra15-triptych section { opacity: 1; }
.fra15-reversible p { margin: 0; text-align: center; font-weight: 800; }
.fra15-reversible small,
.fra15-triptych small { color: #5d7180; }

.fra15-triptych { grid-template-columns: repeat(3, 1fr); }
.fra15-triptych section strong { color: #1a6e4c; font-size: 1.2rem; }
.fra15-sense-note { margin: .8rem 0 0; text-align: center; color: #536d7e; font-weight: 750; }

.fra15-matching-model {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.fra15-matching-model > div { display: grid; gap: .7rem; }
.fra15-matching-model > div > span {
  padding: .7rem;
  border: 1px solid #cbdce3;
  border-radius: .7rem;
  background: #fff;
  text-align: center;
  font-weight: 800;
}
.fra15-matching-model > div:last-child { grid-template-columns: repeat(3, 1fr); }

.fra15-handoff-model { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.fra15-word-order {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  border-radius: .8rem;
  background: #e7f4fb;
  padding: .8rem;
  color: #12658d;
  font-weight: 850;
  text-align: center;
}
.fra15-word-order.reference { background: #fff0dd; color: #935510; }
.fra15-handoff-model p { margin: 0; padding: .7rem; border-left: 3px solid #7ea9bd; background: #fff; }

.fra15-role-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem .8rem;
  margin: 1rem auto 0;
  max-width: 27rem;
}
.fra15-role-map span,
.fra15-role-map b { padding: .5rem; border-radius: .55rem; text-align: center; }
.fra15-role-map span { background: #eef3f5; }
.fra15-role-map b { background: #dff0f8; color: #12658d; }

.fra15-rejected-total {
  display: flex;
  justify-content: center;
  gap: .55rem;
  color: #9a422f;
  font-weight: 800;
}

.fra15-worked-steps {
  display: grid;
  gap: .55rem;
  margin: 1rem 0 0;
  padding: .9rem .9rem .9rem 2.2rem;
  border-radius: .85rem;
  background: #f7f1df;
  color: #394d5a;
  text-align: left;
}
.fra15-worked-steps li { opacity: 0; animation: fra15-step-in .28s ease forwards; }
.fra15-worked-steps li:nth-child(2) { animation-delay: .14s; }
.fra15-worked-steps li:nth-child(3) { animation-delay: .28s; }

@keyframes fra15-step-in {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(.25rem); }
}

@media (max-width: 520px) {
  .fra15-quantity-model,
  .fra15-counter-model,
  .fra15-reversible,
  .fra15-triptych,
  .fra15-matching-model,
  .fra15-handoff-model { padding: .85rem; }
  .fra15-quantity-row { grid-template-columns: 1fr; gap: .38rem; }
  .fra15-role-label { justify-self: start; }
  .fra15-measure-track { height: 2.25rem; }
  .fra15-counter-groups,
  .fra15-reversible,
  .fra15-triptych,
  .fra15-matching-model,
  .fra15-handoff-model { grid-template-columns: 1fr; }
  .fra15-reverse-arrow,
  .fra15-matching-model > i { transform: rotate(90deg); justify-self: center; }
  .fra15-matching-model > div:last-child { grid-template-columns: repeat(3, 1fr); }
  .fra15-fraction-build { flex-wrap: wrap; }
  .fra15-build-label { width: 100%; text-align: center; }
  .fra15-reference-bracket { width: 100%; }
  .lesson-card:has(.fra15-visual) .canvas-narration-controls button {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fra15-measure-bar,
  .fra15-fraction-build,
  .fra15-counter-result,
  .fra15-worked-steps li {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .fra15-worked-steps li { opacity: 1; }
}

/* FRA12 owner-approved mixed-number conversion lesson */
.fra12-context-visual {
  width: min(100%, 760px);
  min-height: 310px;
  padding: clamp(0.8rem, 2vw, 1.35rem);
}

.fra12-context-visual,
.fra12-context-visual * {
  box-sizing: border-box;
}

.fra12-context-visual > * {
  width: 100%;
}

.fra12-context-visual .fra12-timber-hook,
.fra12-context-visual .fra12-breakdown,
.fra12-context-visual .fra12-group-count,
.fra12-context-visual .fra12-piece-join,
.fra12-context-visual .fra12-compact-method,
.fra12-context-visual .fra12-handoff,
.fra12-context-visual .fra12-question-model,
.fra12-context-visual .fra12-repair-model,
.fra12-context-visual .fra12-repair-equation,
.fra12-context-visual .fra12-form-contrast {
  display: grid;
  gap: 1.1rem;
  align-items: center;
  justify-items: center;
  width: 100%;
}

.fra12-context-label {
  color: #76512f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fra12-board-line {
  display: flex;
  gap: clamp(0.45rem, 1.5vw, 0.85rem);
  justify-content: center;
  width: 100%;
}

.fra12-board {
  min-width: 0;
  flex: 1 1 0;
  max-width: 205px;
  border: 2px solid #70472b;
  border-radius: 0.48rem;
  padding: 0.26rem;
  background:
    repeating-linear-gradient(8deg, rgba(104, 57, 28, 0.08) 0 2px, transparent 2px 15px),
    linear-gradient(135deg, #e4b773, #c98a48);
  box-shadow: 0 8px 18px rgba(92, 53, 31, 0.16);
}

.fra12-board.is-partial {
  background: linear-gradient(135deg, #f4dfb9, #dfb981);
}

.fra12-sections {
  display: grid;
  grid-template-columns: repeat(var(--fra12-parts), minmax(0, 1fr));
  min-height: clamp(3.8rem, 9vw, 5.8rem);
  overflow: hidden;
  border-radius: 0.28rem;
}

.fra12-sections i {
  border-right: 2px solid rgba(83, 48, 27, 0.62);
  background: rgba(255, 250, 238, 0.54);
  transition: background 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.fra12-sections i:last-child {
  border-right: 0;
}

.fra12-sections i.is-selected,
.fra12-board.is-whole .fra12-sections i {
  background: rgba(57, 116, 112, 0.74);
}

.fra12-hook-action {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  min-height: 4.4rem;
}

.fra12-count-control {
  min-height: 2.8rem;
  padding: 0.62rem 1rem;
  border: 1px solid #215f5a;
  border-radius: 999px;
  background: #f8fffd;
  color: #174c49;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.fra12-count-control:disabled {
  cursor: default;
  opacity: 0.48;
}

.fra12-count-result {
  min-height: 1.4rem;
  margin: 0;
  color: #174c49;
  font-weight: 800;
}

.fra12-timber-hook.is-counted .fra12-sections i {
  box-shadow: inset 0 0 0 2px #fff8df;
}

.fra12-fraction {
  display: inline-grid;
  grid-template-rows: auto 2px auto;
  min-width: 2.35rem;
  vertical-align: middle;
  text-align: center;
  line-height: 1.05;
}

.fra12-fraction > i {
  display: block;
  height: 2px;
  margin: 0.12rem 0;
  background: currentColor;
}

.fra12-mixed {
  display: inline-flex;
  gap: 0.32rem;
  align-items: center;
  color: #263f3c;
  font-size: clamp(1.45rem, 3.4vw, 2.15rem);
}

.fra12-main-mixed {
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(38, 87, 81, 0.2);
  border-radius: 0.75rem;
  background: rgba(250, 255, 253, 0.86);
}

.fra12-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  width: 100%;
}

.fra12-breakdown-grid > div {
  display: grid;
  gap: 0.28rem;
  min-height: 5.3rem;
  padding: 0.72rem;
  border: 1px solid rgba(60, 94, 89, 0.18);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.74);
  text-align: center;
}

.fra12-breakdown-grid strong {
  color: #687a74;
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fra12-group-equation,
.fra12-piece-equation,
.fra12-staged-model > div,
.fra12-handoff,
.fra12-repair-equation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: center;
  color: #334f4b;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
}

.fra12-board-line.is-joined {
  gap: 0.15rem;
}

.fra12-piece-equation strong {
  color: #174c49;
  font-size: 1.25em;
}

.fra12-compact-method ol,
.fra12-working,
.fra12-repair-equation ol {
  display: grid;
  gap: 0.55rem;
  width: min(100%, 430px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fra12-step;
}

.fra12-compact-method li,
.fra12-working li,
.fra12-repair-equation li {
  counter-increment: fra12-step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(44, 91, 85, 0.2);
  border-radius: 0.62rem;
  background: rgba(255, 255, 255, 0.78);
  color: #263f3c;
  font-weight: 750;
}

.fra12-compact-method li::before,
.fra12-working li::before,
.fra12-repair-equation li::before {
  content: counter(fra12-step);
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #256c66;
  color: white;
  font-size: 0.82rem;
}

.fra12-compact-method > p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin: 0;
}

.fra12-compact-method > p span {
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: #e7f2ef;
  color: #245a55;
  font-size: 0.8rem;
  font-weight: 750;
}

.fra12-handoff span,
.fra12-handoff strong {
  padding: 0.62rem 0.8rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.78);
}

.fra12-question-model {
  align-content: center;
}

.fra12-panel-model,
.fra12-staged-model,
.fra12-symbol-model,
.fra12-reason-model {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  width: 100%;
}

.fra12-piece-key {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  margin: 0;
  color: #5a6d68;
  font-size: 0.8rem;
}

.fra12-piece-key span {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.25rem;
  background: #397a74;
}

.fra12-symbol-model > p,
.fra12-reason-model > p,
.fra12-reason-model blockquote {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(66, 92, 87, 0.2);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.75);
  color: #304d49;
  font-weight: 700;
}

.fra12-reason-model blockquote {
  border-left: 4px solid #c88544;
}

.fra12-working {
  padding-top: 0.65rem;
  border-top: 1px solid rgba(52, 94, 88, 0.18);
}

.fra12-form-contrast {
  grid-template-columns: auto auto auto;
}

.fra12-form-contrast > span {
  color: #65766f;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.fra12-staged-answer {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 620px);
}

.fra12-staged-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.fra12-staged-fields label {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  color: #405a56;
  font-size: 0.84rem;
  font-weight: 750;
}

.fra12-staged-fields input {
  width: 100%;
  min-height: 3.1rem;
  text-align: center;
}

.fra12-staged-fields .fra12-final-field {
  grid-template-columns: 1fr auto;
  align-items: end;
}

.fra12-staged-fields .fra12-fixed-denominator {
  display: grid;
  place-items: center;
  min-width: 2.2rem;
  min-height: 3.1rem;
  border-bottom: 2px solid #2c514c;
  color: #2c514c;
  font-size: 1.1rem;
}

.math-canvas[data-active-cue*="fra12_highlight"] .fra12-board.is-whole,
.math-canvas[data-active-cue*="fra12_emphasise"] .fra12-sections i,
.math-canvas[data-active-cue*="fra12_show"] .fra12-main-mixed {
  box-shadow: 0 0 0 4px rgba(45, 131, 121, 0.22), 0 8px 20px rgba(34, 93, 87, 0.18);
  transform: translateY(-2px);
}

@media (max-width: 540px) {
  .fra12-context-visual {
    min-height: 260px;
    padding: 0.55rem;
  }

  .fra12-board-line {
    gap: 0.28rem;
  }

  .fra12-board {
    padding: 0.16rem;
  }

  .fra12-sections {
    min-height: 3.25rem;
  }

  .fra12-breakdown-grid,
  .fra12-staged-fields {
    grid-template-columns: 1fr;
  }

  .fra12-breakdown-grid > div {
    min-height: auto;
  }

  .fra12-form-contrast {
    grid-template-columns: 1fr;
  }

  .fra12-group-equation,
  .fra12-piece-equation,
  .fra12-handoff,
  .fra12-repair-equation {
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fra12-context-visual *,
  .fra12-context-visual *::before,
  .fra12-context-visual *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* FRA16: compare and order fractions with unlike denominators */
.fra16-context-visual { width: min(100%, 820px); margin-inline: auto; color: #173b4d; }
.fra16-context-visual > * { width: 100%; }
.fra16-fraction { display: inline-grid; grid-template-rows: auto 2px auto; min-width: 2.35rem; text-align: center; vertical-align: middle; font: 850 clamp(1.15rem, 3vw, 2rem)/1 var(--font-display, Georgia, serif); }
.fra16-fraction > i { display: block; height: 2px; margin: .14em 0; background: currentColor; }
.fra16-hook, .fra16-comparison-bars, .fra16-benchmark, .fra16-common-track, .fra16-worked, .fra16-equal-bars { display: grid; gap: clamp(.7rem, 2vw, 1.15rem); }
.fra16-game-row { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 7.5rem; align-items: center; gap: .7rem; }
.fra16-game-row > strong { padding: .42rem .7rem; border-radius: .7rem; color: #fff; text-align: center; }
.fra16-game-row.blue > strong { background: #176a8a; }
.fra16-game-row.orange > strong { background: #b95427; }
.fra16-game-row small { color: #52666f; font-weight: 750; }
.fra16-progress-bar, .fra16-bar { display: grid; grid-template-columns: repeat(var(--fra16-parts), minmax(0, 1fr)); min-width: 0; height: clamp(2.2rem, 6vw, 3.35rem); overflow: hidden; border: 2px solid #1c566c; border-radius: .55rem; background: #fffdf7; box-shadow: 0 .35rem 0 rgba(23, 59, 77, .10); }
.fra16-progress-bar > i, .fra16-bar > i, .fra16-unit-track > i { display: block; min-width: 0; border-right: 1px solid rgba(23, 59, 77, .45); background: #fffdf7; }
.fra16-progress-bar > i:last-child, .fra16-bar > i:last-child, .fra16-unit-track > i:last-child { border-right: 0; }
.fra16-progress-bar > i.is-selected, .fra16-bar > i.is-selected, .fra16-unit-track > i.is-selected { position: relative; background: repeating-linear-gradient(135deg, #78c9c4 0 8px, #a8e0d8 8px 16px); box-shadow: inset 0 -4px #176a8a; }
.fra16-game-row.orange .fra16-progress-bar > i.is-selected { background: repeating-linear-gradient(135deg, #f1a06e 0 8px, #ffd1a8 8px 16px); box-shadow: inset 0 -4px #a84425; }
.fra16-stage-size { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.fra16-stage-size span { width: max(7rem, var(--stage)); padding: .35rem .55rem; border: 1px dashed #637984; border-radius: .45rem; background: #f7f2e8; font-size: .73rem; text-align: center; }
.fra16-same-game { margin: 0; color: #52666f; text-align: center; font-weight: 800; }
.fra16-bar-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 4.4rem; align-items: center; gap: .7rem; }
.fra16-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .4rem; }
.fra16-original, .fra16-equivalent { display: grid; place-items: center; }
.fra16-equivalent { padding: .35rem; border-radius: .55rem; background: #eef8f5; color: #15556a; }
.fra16-benchmark { position: relative; padding-top: .6rem; }
.fra16-half-label { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; color: #52666f; font-size: .78rem; font-weight: 800; text-align: center; }
.fra16-half-label strong { color: #9b4f21; font-size: 1.05rem; }
.fra16-benchmark-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 8rem; align-items: center; gap: .6rem; }
.fra16-benchmark-track { position: relative; height: 1.7rem; border: 2px solid #1c566c; border-radius: 999px; background: #fffdf7; }
.fra16-benchmark-track::after { content: ""; position: absolute; left: 50%; top: -.35rem; bottom: -.35rem; border-left: 2px dashed #b95427; }
.fra16-benchmark-track > i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--endpoint); border-radius: 999px 0 0 999px; background: repeating-linear-gradient(135deg, #78c9c4 0 7px, #a8e0d8 7px 14px); }
.fra16-benchmark-track > b { position: absolute; left: var(--endpoint); top: 50%; width: .85rem; height: .85rem; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: #176a8a; box-shadow: 0 0 0 2px #15556a; }
.fra16-benchmark-row small { font-weight: 800; color: #52666f; }
.fra16-direction, .fra16-order-direction { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; color: #52666f; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.fra16-direction i, .fra16-order-direction i { height: 2px; background: linear-gradient(90deg, #176a8a, #b95427); }
.fra16-track-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4.5rem; align-items: center; gap: .6rem; }
.fra16-unit-track { display: grid; grid-template-columns: repeat(var(--fra16-parts), minmax(0, 1fr)); height: 1.75rem; overflow: hidden; border: 2px solid #1c566c; border-radius: .45rem; }
.fra16-track-row > strong { color: #9b4f21; font-size: .82rem; }
.fra16-order-result, .fra16-symbolic { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .65rem; padding: .8rem; border-radius: .9rem; background: #eef8f5; }
.fra16-order-result > b { color: #9b4f21; font-size: 1.5rem; }
.fra16-symbolic { min-height: 7.4rem; gap: clamp(1rem, 5vw, 3rem); background: #fffdf7; border: 2px solid #87aeb7; }
.fra16-symbolic > strong { display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px dashed #b95427; border-radius: .75rem; color: #b95427; font-size: 1.6rem; }
.fra16-handoff { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.fra16-handoff article { display: grid; place-items: center; gap: .5rem; min-height: 7rem; padding: 1rem; border: 2px solid #77aeb4; border-radius: 1rem; background: #fffdf7; }
.fra16-route-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #173b4d; color: #fff; font-size: 1.4rem; font-weight: 900; }
.fra16-stage-path { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 800; }
.fra16-stage-path i { height: 2px; background: #9eb4b9; }
.fra16-stage-path .is-complete, .fra16-stage-path .is-active { color: #176a8a; }
.fra16-order-canvas { display: grid; gap: .8rem; padding: 1rem; border: 2px dashed #77aeb4; border-radius: .9rem; background: #fffdf7; text-align: center; }
.fra16-order-canvas p { margin: 0; color: #52666f; }
.fra16-shared-endpoint { display: flex; align-items: center; justify-content: center; gap: .5rem; color: #9b4f21; font-size: .78rem; font-weight: 850; }
.fra16-shared-endpoint i { width: 2rem; border-top: 3px solid #b95427; }
.fra16-worked ol { display: grid; gap: .35rem; margin: 0; padding: .8rem .8rem .8rem 2.2rem; border-radius: .8rem; background: #f7f2e8; color: #273e48; }
.fra16-symbol-guide { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; text-align: center; }
.fra16-symbol-guide strong { color: #9b4f21; font-size: 2rem; }
.fra16-equivalent-input, .fra16-benchmark-input, .fra16-order-input { display: grid; gap: 1rem; min-width: 0; }
.fra16-equivalent-fields, .fra16-benchmark-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fra16-equivalent-fields > label, .fra16-benchmark-fields > label, .fra16-symbol-select { display: grid; gap: .45rem; padding: .75rem; border: 1px solid #9eb4b9; border-radius: .8rem; background: #fffdf7; }
.fra16-equivalent-fields label > span:first-child, .fra16-benchmark-fields label > span:first-child, .fra16-symbol-select > span { color: #52666f; font-size: .78rem; font-weight: 800; }
.fra16-fixed-fraction { display: grid; grid-template-rows: 2.5rem 2px 2.2rem; place-items: center; width: 5.2rem; margin-inline: auto; }
.fra16-fixed-fraction input { width: 100%; height: 2.45rem; padding: .2rem; text-align: center; }
.fra16-fixed-fraction i { width: 100%; height: 2px; background: #173b4d; }
.fra16-fixed-fraction b { font-size: 1.2rem; }
.fra16-symbol-select { width: min(15rem, 100%); margin-inline: auto; }
.fra16-equivalent-input select, .fra16-benchmark-input select, .fra16-symbol-select select { min-height: 2.75rem; }
.fra16-order-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.fra16-order-item { display: grid; gap: .4rem; padding: .55rem; border: 2px solid #77aeb4; border-radius: .85rem; background: #fffdf7; box-shadow: 0 .35rem 0 rgba(23, 59, 77, .10); }
.fra16-order-item.is-dragging { opacity: .45; }
.fra16-order-card { min-height: 3.2rem; border: 0; border-radius: .55rem; background: #eef8f5; color: #173b4d; cursor: grab; font-size: 1.15rem; font-weight: 850; }
.fra16-order-card:focus-visible { outline: 3px solid #e18043; outline-offset: 2px; }
.fra16-move-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.fra16-move-buttons button { min-height: 2.5rem; border: 1px solid #77aeb4; border-radius: .5rem; background: #fff; color: #173b4d; font-size: 1.1rem; }
.fra16-order-status { margin: 0; color: #52666f; font-size: .8rem; text-align: center; }
.math-canvas[data-active-cue^="hook-cue"] .fra16-hook,
.math-canvas[data-active-cue^="t2-cue"] .fra16-equivalent,
.math-canvas[data-active-cue^="t3-cue"] .fra16-half-label,
.math-canvas[data-active-cue^="t4-cue"] .fra16-order-result,
.math-canvas[data-active-cue^="t5-cue"] .fra16-equivalent,
.math-canvas[data-active-cue^="r-"] .fra16-comparison-bars { animation: fra16-cue-pulse .65s ease both; }
@keyframes fra16-cue-pulse { 50% { transform: scale(1.015); filter: saturate(1.28); } }

@media (max-width: 560px) {
  .fra16-game-row { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .fra16-game-row small { grid-column: 2; }
  .fra16-bar-row { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .fra16-bar-row .fra16-equivalent { grid-column: 2; justify-self: end; }
  .fra16-bars { grid-template-columns: 1fr; }
  .fra16-benchmark-row { grid-template-columns: 3.3rem minmax(0, 1fr); }
  .fra16-benchmark-row small { grid-column: 2; }
  .fra16-track-row { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .fra16-track-row > strong { grid-column: 2; justify-self: end; }
  .fra16-handoff, .fra16-equivalent-fields, .fra16-benchmark-fields, .fra16-order-list { grid-template-columns: 1fr; }
  .fra16-stage-path { grid-template-columns: 1fr; text-align: center; }
  .fra16-stage-path i { width: 2px; height: 1rem; margin-inline: auto; }
  .fra16-order-item { grid-template-columns: minmax(0, 1fr) 5.8rem; align-items: center; }
  .fra16-move-buttons button { min-height: 2.8rem; }
  .fra16-fraction { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fra16-context-visual *, .fra16-order-input * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* FRA11 owner-approved improper-fraction regrouping surfaces */
.fra11-context-visual {
  width: min(920px, 100%);
  margin-inline: auto;
}

.fra11-visual {
  width: 100%;
  color: #122746;
}

.fra11-fraction {
  display: inline-grid;
  grid-template-rows: auto 2px auto;
  min-width: 42px;
  place-items: center;
  vertical-align: middle;
  font: 750 1.25rem/1 var(--sans, system-ui, sans-serif);
}

.fra11-fraction i {
  width: 100%;
  height: 2px;
  background: currentColor;
}

.fra11-mixed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.45rem;
}

.fra11-mixed > strong { font-size: 1.55em; }

.fra11-equal-pieces,
.fra11-linked-model,
.fra11-symbolic-rule,
.fra11-remainder-check,
.fra11-rule-summary,
.fra11-claim-model,
.fra11-division-choice,
.fra11-symbolic-question,
.fra11-repair-denominator {
  width: min(820px, 100%);
  margin-inline: auto;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid #cdd9e8;
  border-radius: 22px;
  background: linear-gradient(145deg, #fbfdff, #eef5fb);
  box-shadow: 0 14px 34px rgb(24 56 87 / 10%);
}

.fra11-pieces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
}

.fra11-piece-group {
  display: inline-grid;
  grid-template-columns: repeat(var(--fra11-parts-per-whole), minmax(34px, 54px));
  gap: 5px;
  padding: 8px;
  border: 3px solid #2b5e83;
  border-radius: 13px;
  background: #fff;
}

.fra11-piece-group.is-remainder-group {
  grid-template-columns: repeat(auto-fit, minmax(34px, 54px));
  border-style: dashed;
  border-color: #a4512d;
}

.fra11-piece {
  position: relative;
  display: inline-grid;
  width: clamp(38px, 7vw, 58px);
  aspect-ratio: 1.55;
  place-items: center;
  border: 2px solid #173c60;
  border-radius: 6px;
  background: #4ea5dd;
  box-shadow: inset 0 -5px 0 rgb(14 60 94 / 17%);
}

.fra11-piece:focus-visible {
  outline: 4px solid #f1a33c;
  outline-offset: 3px;
}

.fra11-piece.is-remainder {
  border-style: dashed;
  border-color: #8c3c20;
}

.fra11-piece small {
  color: #082d4b;
  font: 800 .75rem/1 system-ui, sans-serif;
}

.fra11-tile-bracket {
  display: grid;
  width: clamp(38px, 7vw, 58px);
  gap: 2px;
  margin: 0 auto 12px;
  text-align: center;
}

.fra11-tile-bracket span {
  height: 8px;
  border: 2px solid #173c60;
  border-bottom: 0;
}

.fra11-grouping-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.fra11-grouping-legend span {
  padding: 8px 12px;
  border: 2px solid #2b5e83;
  border-radius: 999px;
  background: #fff;
}

.fra11-grouping-legend span:last-child { border-style: dashed; border-color: #a4512d; }

.fra11-result,
.fra11-symbolic-question,
.fra11-division-choice,
.fra11-source-fraction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.fra11-result { margin-top: 20px; font-size: 1.45rem; }

.fra11-linked-model { display: grid; gap: 18px; }

.fra11-linked-division,
.fra11-linked-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  font-size: clamp(1.15rem, 3vw, 1.55rem);
}

.fra11-field-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  color: #285a7c;
  text-align: center;
  font-weight: 750;
}

.fra11-symbolic-rule { display: grid; gap: 18px; text-align: center; }
.fra11-symbolic-rule > div { display: flex; align-items: center; justify-content: center; gap: 14px; }
.fra11-rule-fields { flex-wrap: wrap; }
.fra11-rule-fields span { padding: 7px 10px; border-radius: 999px; background: #dceefa; font-weight: 700; }

.fra11-remainder-check {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.fra11-invalid-state,
.fra11-valid-state {
  display: grid;
  align-content: center;
  gap: 11px;
  min-height: 180px;
  padding: 18px;
  border: 3px solid #a23a35;
  border-radius: 15px;
  background: #fff5f3;
  text-align: center;
}

.fra11-valid-state { border-color: #27734b; background: #effaf3; }
.fra11-invalid-state > b { color: #932d29; }
.fra11-valid-state > b { color: #226543; }

.fra11-rule-summary {
  display: grid;
  gap: 12px;
  padding-left: clamp(18px, 3vw, 30px);
  list-style: none;
}

.fra11-rule-summary li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.fra11-rule-summary li b {
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: #175f8d;
  color: #fff;
}

.fra11-claim-model { display: grid; gap: 12px; text-align: center; }
.fra11-claim-model > strong { padding: 14px; border: 2px solid #9e4c35; border-radius: 12px; background: #fff; font-size: 1.2rem; }
.fra11-claim-model > div { display: flex; justify-content: center; align-items: center; gap: 12px; }
.fra11-division-choice { flex-direction: column; }
.fra11-symbolic-question { min-height: 180px; font-size: 1.45rem; }
.fra11-repair-denominator { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }

.fixed-denominator-mixed .fraction-input,
.linked-mixed-fields .fraction-input { align-items: stretch; }

.fixed-mixed-denominator {
  display: grid;
  min-width: 72px;
  min-height: 54px;
  place-items: center;
  border: 2px solid #8aa0b4;
  border-radius: 10px;
  background: #e9eff4;
  color: #173c60;
  font-size: 1.2rem;
}

.division-then-mixed-answer {
  display: grid;
  gap: 14px;
  width: min(640px, 100%);
  margin-inline: auto;
}

.division-result-fields,
.linked-mixed-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}

.division-result-fields label,
.linked-mixed-fields label { display: grid; gap: 6px; }
.division-result-fields input,
.linked-mixed-fields input { min-width: 0; width: 100%; }
.linked-response-arrow { text-align: center; color: #28658e; font-size: 1.7rem; }
.linked-field-note { margin: 0; color: #536779; text-align: center; }

/* Teaching scenes keep mathematics present but let Ryan's exact cue reveal each new state. */
.math-canvas:not(.feedback-worked):not(.feedback-correct):not(.feedback-support) .fra11-equal-pieces[data-fra11-scene="HOOK"] .fra11-grouping-legend,
.math-canvas:not(.feedback-worked):not(.feedback-correct):not(.feedback-support) .fra11-equal-pieces[data-fra11-scene="HOOK"] .fra11-result,
.math-canvas:not(.feedback-worked):not(.feedback-correct):not(.feedback-support) .fra11-equal-pieces[data-fra11-scene="T1"] .fra11-grouping-legend,
.math-canvas:not(.feedback-worked):not(.feedback-correct):not(.feedback-support) .fra11-equal-pieces[data-fra11-scene="T1"] .fra11-result,
.math-canvas:not(.feedback-worked):not(.feedback-correct):not(.feedback-support) .fra11-linked-model[data-fra11-scene="T2"] .fra11-field-map,
.math-canvas:not(.feedback-worked):not(.feedback-correct):not(.feedback-support) .fra11-linked-model[data-fra11-scene="T2"] .fra11-linked-result,
.math-canvas:not(.feedback-worked):not(.feedback-correct):not(.feedback-support) .fra11-symbolic-rule[data-fra11-scene="T3"] .fra11-rule-fields,
.math-canvas:not(.feedback-worked):not(.feedback-correct):not(.feedback-support) .fra11-symbolic-rule[data-fra11-scene="T3"] > div:last-child,
.math-canvas:not([class*="cue-t4-cue-invalid"]):not([class*="cue-t4-cue-regroup"]):not([class*="cue-t4-cue-valid"]):not([class*="cue-t4-cue-result"]) .fra11-remainder-check .fra11-invalid-state,
.math-canvas:not(.feedback-worked):not(.feedback-correct):not(.feedback-support) .fra11-remainder-check .fra11-valid-state {
  opacity: 0;
  visibility: hidden;
}

.math-canvas[class*="cue-hook-cue-"] .fra11-equal-pieces[data-fra11-scene="HOOK"] .fra11-grouping-legend,
.math-canvas.cue-hook-cue-mixed-reveal .fra11-equal-pieces[data-fra11-scene="HOOK"] .fra11-result,
.math-canvas[class*="cue-t1-cue-"] .fra11-equal-pieces[data-fra11-scene="T1"] .fra11-grouping-legend,
.math-canvas.cue-t1-cue-result .fra11-equal-pieces[data-fra11-scene="T1"] .fra11-result,
.math-canvas[class*="cue-t2-cue-"] .fra11-linked-model[data-fra11-scene="T2"] .fra11-field-map,
.math-canvas.cue-t2-cue-denominator .fra11-linked-model[data-fra11-scene="T2"] .fra11-linked-result,
.math-canvas[class*="cue-t3-cue-"] .fra11-symbolic-rule[data-fra11-scene="T3"] .fra11-rule-fields,
.math-canvas.cue-t3-cue-result .fra11-symbolic-rule[data-fra11-scene="T3"] > div:last-child,
.math-canvas[class*="cue-t4-cue-invalid"] .fra11-remainder-check .fra11-invalid-state,
.math-canvas[class*="cue-t4-cue-valid"] .fra11-remainder-check .fra11-valid-state,
.math-canvas.cue-t4-cue-result .fra11-remainder-check .fra11-valid-state {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 520px) {
  .fra11-equal-pieces,
  .fra11-linked-model,
  .fra11-symbolic-rule,
  .fra11-remainder-check,
  .fra11-rule-summary,
  .fra11-claim-model,
  .fra11-division-choice,
  .fra11-symbolic-question,
  .fra11-repair-denominator { padding: 14px; border-radius: 16px; }

  .fra11-piece { width: 38px; }
  .fra11-piece-group { grid-template-columns: repeat(var(--fra11-parts-per-whole), 32px); padding: 6px; gap: 3px; }
  .fra11-piece-group .fra11-piece { width: 32px; }
  .fra11-remainder-check { grid-template-columns: 1fr; }
  .fra11-field-map { grid-template-columns: 1fr; }
  .division-result-fields,
  .linked-mixed-fields { grid-template-columns: 1fr; }
  .fixed-mixed-denominator { min-width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .fra11-visual *,
  .fra11-visual *::before,
  .fra11-visual *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* FRA09: simplify by one supplied factor */
.fra09-context-visual { width: min(100%, 760px); }
.fra09-visual { --fra09-ink:#183042; --fra09-blue:#2878b7; --fra09-teal:#149b8a; --fra09-gold:#e8aa2d; color:var(--fra09-ink); width:100%; }
.fra09-visual small { color:#526a78; font-weight:750; letter-spacing:.03em; text-transform:uppercase; }
.fra09-fraction { display:inline-grid; grid-template-rows:auto 3px auto; min-width:3.4rem; place-items:center; padding:.15rem .45rem; font-size:clamp(1.35rem,4vw,2.25rem); line-height:1; vertical-align:middle; }
.fra09-fraction i { width:100%; height:3px; border-radius:9px; background:currentColor; }
.fra09-fraction.result { color:var(--fra09-teal); }
.fra09-fraction.blank { color:#6f8290; border:2px dashed #adc0ca; border-radius:.7rem; }
.fra09-factor-badge { display:inline-flex; align-items:center; gap:.55rem; padding:.45rem .75rem; border:2px solid #74b9ad; border-radius:999px; background:#effaf7; box-shadow:0 5px 14px rgb(20 155 138 / .12); }
.fra09-factor-badge b { display:grid; width:2rem; aspect-ratio:1; place-items:center; border-radius:50%; background:var(--fra09-teal); color:white; font-size:1.15rem; }
.fra09-equivalence-row,.fra09-step-path,.fra09-question,.fra09-teaching.symbolic,.fra09-repair { display:flex; align-items:center; justify-content:center; gap:clamp(.65rem,3vw,1.5rem); flex-wrap:wrap; }
.fra09-same-value { padding:.35rem .7rem; border-radius:999px; background:#eef5f8; color:#426173; font-weight:800; }
.fra09-progress-wrap { position:relative; width:min(100%,680px); margin:1.25rem auto; }
.fra09-progress-bar { display:grid; grid-template-columns:repeat(24,1fr); min-height:72px; overflow:hidden; border:3px solid var(--fra09-ink); border-radius:14px; background:white; }
.fra09-progress-bar i { border-left:1px solid #abc0cb; background:#f7fafb; transition:transform .35s ease,background .35s ease; }
.fra09-progress-bar i.filled { background:linear-gradient(180deg,#48a6d9,#2878b7); }
.fra09-progress-bar i.group-start { border-left:1px solid #abc0cb; }
.fra09-progress-bar i:first-child { border-left:0; }
.fra09-endpoint { position:absolute; inset:-7px auto -7px 75%; width:3px; background:#cc7326; border-radius:9px; }
.fra09-lanes { display:grid; gap:.65rem; width:min(100%,610px); margin:1rem auto 0; }
.fra09-quotient-lane { display:grid; grid-template-columns:minmax(6rem,1fr) repeat(4,auto); align-items:center; gap:.7rem; padding:.72rem 1rem; border:2px solid #b7cbd5; border-radius:12px; background:white; font-size:1.12rem; }
.fra09-quotient-lane small { margin-right:auto; }
.fra09-quotient-lane .factor { color:var(--fra09-teal); font-weight:850; }
.fra09-quotient-lane strong { display:grid; width:2.15rem; aspect-ratio:1; place-items:center; border-radius:.5rem; background:#e8f7f4; color:#08796d; }
.fra09-result-card { display:flex; align-items:center; gap:1rem; margin-top:1rem; padding:.7rem 1rem; border:2px solid #85cbbf; border-radius:14px; background:#f0fbf8; }
.fra09-contrast-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; width:min(100%,690px); }
.fra09-contrast-grid section { display:grid; gap:.5rem; padding:1rem; border:2px solid; border-radius:14px; background:white; }
.fra09-contrast-grid .valid { border-color:#5ab8a8; }
.fra09-contrast-grid .invalid { border-color:#e5a4a0; }
.fra09-contrast-grid .valid b { color:#08796d; }
.fra09-contrast-grid .invalid b { color:#a33c36; }
.fra09-step-path { padding:1rem; }
.fra09-step-path > span:not(.fra09-fraction) { font-weight:850; }
.fra09-step-path .stop-mark,.fra09-repair .stop-mark { padding:.45rem .75rem; border-radius:.55rem; background:#ffe8b7; color:#7e4d00; letter-spacing:.05em; }
.fra09-step-path .later-path { opacity:.42; filter:grayscale(1); border-left:2px dashed #7f929d; padding-left:1rem; }
.fra09-transition-stage { padding:.7rem 1rem; border-radius:12px; background:#edf3f6; font-weight:850; }
.fra09-transition-stage.active { background:#e4f7f3; color:#08796d; box-shadow:0 0 0 3px #9bd9ce; }
.fra09-question { min-height:185px; padding:1rem; }
.fra09-question.transform { display:block; }
.fra09-exact-check { display:grid; gap:.45rem; min-width:min(100%,18rem); }
.fra09-exact-check span,.fra09-two-lane-preview span { padding:.65rem .8rem; border:2px solid #c6d6de; border-radius:.65rem; background:white; font-weight:750; }
.fra09-verdict { width:100%; text-align:center; }
.fra09-verdict.yes { color:#08796d; }
.fra09-verdict.no { color:#a33c36; }
.fra09-two-lane-preview { display:grid; gap:.5rem; }
.fra09-question.student-error > div { display:flex; align-items:center; gap:.65rem; }
.fra09-question .student-result { color:#b84c46; }
.fra09-repair { min-height:180px; padding:1rem; border:2px solid #9cc8d9; border-radius:16px; background:#f4fafc; }
.fra09-repair.operation .wrong { text-decoration:line-through; color:#a33c36; }
.fra09-repair.operation .right { padding:.45rem .7rem; border-radius:.55rem; background:#dff6f1; color:#08796d; font-weight:850; }
.fra09-factor-links { display:grid; gap:.7rem; }
.fra09-factor-links span { padding:.6rem 1rem; border-left:4px solid var(--fra09-teal); background:white; }
.fra09-visual[data-reveal="false"] .fra09-result-card,.fra09-visual[data-reveal="false"] .fra09-teaching .result { opacity:.55; }
.fra09-teaching.hook .result,.fra09-teaching.hook .fra09-same-value { visibility:hidden; }
.math-canvas.cue-hook_resultfraction .fra09-teaching.hook .result,.math-canvas.cue-hook_progressendpoint .fra09-teaching.hook .fra09-same-value { visibility:visible; }
.math-canvas.cue-hook_groupoutlines .fra09-progress-bar i.group-start { border-left:4px solid var(--fra09-gold); }
.math-canvas[class*="cue-hook_"] .fra09-progress-bar,.math-canvas[class*="cue-t1_"] .fra09-progress-bar { box-shadow:0 0 0 6px rgb(232 170 45 / .25); }
.math-canvas[class*="cue-t2_"] .fra09-quotient-lane,.math-canvas[class*="cue-t3_"] .fra09-contrast-grid section,.math-canvas[class*="cue-t4_"] .fra09-step-path { animation:fra09CuePulse .72s ease both; }
@keyframes fra09CuePulse { 50% { transform:translateY(-3px); box-shadow:0 8px 24px rgb(40 120 183 / .22); } }
@media (max-width:520px) {
  .fra09-progress-bar { min-height:56px; }
  .fra09-contrast-grid { grid-template-columns:1fr; }
  .fra09-quotient-lane { grid-template-columns:minmax(5rem,1fr) repeat(4,auto); gap:.38rem; padding:.6rem; font-size:.98rem; }
  .fra09-equivalence-row,.fra09-step-path,.fra09-question,.fra09-repair { gap:.55rem; }
  .fra09-factor-badge small { font-size:.62rem; }
  .fra09-question { min-height:150px; padding:.55rem; }
  .fra09-step-path .later-path { width:100%; border-left:0; border-top:2px dashed #7f929d; padding:.65rem 0 0; text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  .fra09-visual * { animation:none!important; transition:none!important; }
}

/* FRA08 owner-authorised equivalent-fractions visual system. */
.fra08-context-visual {
  width: min(760px, 100%);
  min-height: 300px;
}

.fra08-visual {
  width: 100%;
  color: var(--ink, #17243b);
}

.fra08-fraction {
  display: inline-grid;
  grid-template-rows: minmax(38px, auto) 3px minmax(38px, auto);
  width: 76px;
  place-items: center;
  font-size: clamp(1.45rem, 4vw, 2.25rem);
  font-variant-numeric: tabular-nums;
}

.fra08-fraction > i {
  width: 100%;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

.fra08-tracker,
.fra08-ribbon-visual,
.fra08-equation-visual,
.fra08-build-visual,
.fra08-reasoning-visual {
  width: 100%;
  min-height: 270px;
  display: grid;
  place-content: center;
  gap: 28px;
}

.fra08-tracker-stack {
  position: relative;
  width: min(610px, 86vw);
  display: grid;
  gap: 24px;
}

.fra08-ribbon-stack {
  width: min(680px, calc(100vw - 64px));
  max-width: 100%;
  display: grid;
  gap: 24px;
}

.fra08-tracker-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fra08-block-row {
  display: grid;
  grid-template-columns: repeat(var(--fra08-parts), minmax(0, 1fr));
  width: 100%;
  height: clamp(44px, 7vw, 62px);
  border: 3px solid #213453;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.fra08-block-row > i {
  min-width: 0;
  border-right: 2px solid #62718a;
  background: #fff;
}

.fra08-block-row > i:last-child { border-right: 0; }

.fra08-block-row > i.is-lit {
  background-color: #54c8b0;
  background-image: repeating-linear-gradient(135deg, rgba(15, 65, 74, .2) 0 4px, transparent 4px 10px);
}

.fra08-endpoint-layer {
  position: absolute;
  left: 72px;
  right: 0;
  top: -10px;
  bottom: -10px;
  pointer-events: none;
}

.fra08-endpoint-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #e25d5d;
  box-shadow: 0 0 0 3px rgba(226, 93, 93, .16);
}

.fra08-tracker.scene-hook .fra08-redesigned,
.fra08-tracker.scene-hook .fra08-endpoint-layer { opacity: 0; }
.math-canvas.cue-fra08_hook_cue_2 .fra08-tracker.scene-hook .fra08-redesigned,
.math-canvas.cue-fra08_hook_cue_3 .fra08-tracker.scene-hook .fra08-redesigned { opacity: 1; }
.math-canvas.cue-fra08_hook_cue_3 .fra08-tracker.scene-hook .fra08-endpoint-layer { opacity: 1; }

.fra08-visual-key {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .88rem;
  color: #4c5b72;
}

.fra08-visual-key span {
  width: 24px;
  height: 16px;
  border: 2px solid #213453;
  background: repeating-linear-gradient(135deg, #54c8b0 0 4px, #78d8c4 4px 10px);
}

.fra08-visual-key i {
  width: 3px;
  height: 22px;
  background: #e25d5d;
}

.fra08-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 6vw, 58px);
}

.fra08-relation,
.fra08-build-arrow {
  font-size: clamp(2rem, 7vw, 3.8rem);
  font-weight: 700;
}

.fra08-factor-cue {
  display: grid;
  grid-template-columns: repeat(2, minmax(80px, 1fr));
  gap: 26px;
  width: min(350px, 80vw);
  margin: -18px auto 0;
}

.fra08-factor-cue span,
.fra08-build-instruction span {
  display: inline-flex;
  justify-content: center;
  padding: 8px 14px;
  border: 2px solid #276c80;
  border-radius: 999px;
  background: #e8f8fa;
  font-weight: 800;
}

.fra08-one-side-contrast {
  border-top: 2px dashed #a8b2c3;
  padding-top: 18px;
  text-align: center;
}

.fra08-one-side-contrast > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #a43d45;
}

.fra08-one-side-contrast .fra08-fraction { width: 50px; font-size: 1.25rem; grid-template-rows: 26px 2px 26px; }

.fra08-build-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.fra08-build-instruction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fra08-reason-source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.fra08-reason-source .fra08-fraction,
.fra08-option-model .fra08-fraction { width: 52px; font-size: 1.2rem; grid-template-rows: 26px 2px 26px; }

.fra08-option-models {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 12px;
}

.fra08-option-model {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid #9ca9bb;
  border-radius: 14px;
  background: #fff;
}

.fra08-option-model > span { font-weight: 900; }
.fra08-option-model.is-correct { border: 4px double #18745d; background: #e8f7f1; }

.factor-then-integer-answer {
  display: grid;
  gap: 20px;
  width: min(520px, 100%);
  margin-inline: auto;
}

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

.factor-option {
  min-height: 48px;
  border: 2px solid #7d8ca3;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.factor-option.is-selected {
  border: 4px double #176f7c;
  background: #e7f7f8;
  box-shadow: 0 0 0 3px rgba(23, 111, 124, .13);
}

.factor-value-stage[hidden] { display: none; }

.fixed-fraction-builder input,
.fraction-input input,
.factor-value-stage input {
  min-width: 72px;
  min-height: 54px;
  font-size: clamp(1.2rem, 4vw, 1.75rem);
}

@media (max-width: 520px) {
  .fra08-context-visual { min-height: 260px; }
  .fra08-tracker,
  .fra08-ribbon-visual,
  .fra08-equation-visual,
  .fra08-build-visual,
  .fra08-reasoning-visual { min-height: 235px; gap: 18px; }
  .fra08-tracker-stack { width: 100%; gap: 17px; }
  .fra08-ribbon-stack { gap: 17px; }
  .fra08-tracker-row { grid-template-columns: 46px minmax(0, 1fr); gap: 8px; }
  .fra08-endpoint-layer { left: 54px; }
  .fra08-equation { gap: 14px; }
  .fra08-fraction { width: 60px; grid-template-rows: 34px 3px 34px; font-size: 1.55rem; }
  .fra08-option-models { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .fra08-build-equation { gap: 18px; }
  .factor-options { gap: 8px; }
  .fixed-fraction-builder input,
  .fraction-input input,
  .factor-value-stage input { width: 78px; min-width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .fra08-visual *,
  .fra08-visual *::before,
  .fra08-visual *::after { animation: none !important; transition: none !important; }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--ground);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(117, 83, 166, 0.08), transparent 27rem),
    radial-gradient(circle at 100% 12%, rgba(20, 125, 120, 0.1), transparent 34rem),
    var(--ground);
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  color: white;
  background: var(--ink);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}

.app-shell {
  width: min(1500px, 100%);
  min-height: 100vh;
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--teal-dark);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.brand-mark,
.loading-mark {
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 16px 9px 16px 9px;
  color: white;
  background: var(--ink);
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.08);
}

.primary-button,
.secondary-button,
.quiet-button,
.text-button {
  min-height: 48px;
  border-radius: 14px;
  font-weight: 750;
  cursor: pointer;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  padding: 13px 22px;
  border: 1px solid var(--teal-dark);
  color: white;
  background: var(--teal);
  box-shadow: 0 8px 20px rgba(20, 125, 120, 0.2);
  text-decoration: none;
}

.primary-button:hover:not(:disabled) {
  background: var(--teal-dark);
  transform: translateY(-1px);
}

.primary-button:disabled {
  border-color: #b8c5c1;
  color: #eef2ef;
  background: #a8b6b2;
  box-shadow: none;
  cursor: not-allowed;
}

.secondary-button {
  min-width: 108px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  background: white;
}

.secondary-button:hover:not(:disabled),
.quiet-button:hover {
  border-color: #aec4be;
  background: #f5faf8;
}

.secondary-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.text-button {
  padding: 10px 14px;
  border: 0;
  color: var(--teal-dark);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Home */

.home-shell {
  padding: 0 clamp(18px, 4vw, 68px) 32px;
}

.home-topbar,
.topbar {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.home-brand,
.brand-button {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.home-brand small,
.brand-button small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-brand strong,
.brand-button strong {
  display: block;
  max-width: 46ch;
  font-size: 1.08rem;
  line-height: 1.2;
}

.prototype-pill {
  padding: 8px 13px;
  border: 1px solid rgba(117, 83, 166, 0.24);
  border-radius: 999px;
  color: #5a3d82;
  background: var(--purple-soft);
  font-size: 0.78rem;
  font-weight: 750;
}

.home-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topic-back {
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--teal-dark);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.topic-back:hover {
  border-color: #aec4be;
  background: #f5faf8;
}

.home-main {
  outline: none;
}

.home-hero {
  position: relative;
  display: grid;
  min-height: 330px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: center;
  gap: 34px;
  padding: clamp(36px, 6vw, 78px);
  border: 1px solid rgba(23, 49, 50, 0.1);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(237, 247, 242, 0.93)),
    var(--paper);
  box-shadow: var(--shadow);
}

.home-hero::before {
  position: absolute;
  width: 360px;
  height: 360px;
  right: -130px;
  top: -130px;
  border: 55px solid rgba(20, 125, 120, 0.07);
  border-radius: 50%;
  content: "";
}

.home-hero h1 {
  max-width: 12ch;
  margin: 0;
  font-family: Georgia, Cambria, serif;
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.home-hero p {
  max-width: 56ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.65;
}

.hero-model {
  position: relative;
  display: grid;
  min-height: 220px;
  place-items: center;
}

.hero-bars {
  display: grid;
  width: min(100%, 430px);
  height: 94px;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background: white;
  box-shadow: 14px 14px 0 var(--gold-soft);
}

.hero-bars span {
  border-right: 2px solid var(--ink);
  background: var(--teal-soft);
}

.hero-bars span:nth-child(-n+3) {
  background: var(--teal);
}

.hero-bars span:last-child {
  border-right: 0;
}

.hero-fraction {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 5%;
  display: grid;
  width: 78px;
  padding: 10px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  font-size: 1.55rem;
  font-weight: 850;
  transform: rotate(4deg);
}

.hero-fraction i {
  width: 100%;
  height: 2px;
  margin: 3px 0;
  background: currentColor;
}

.hero-topic-stack {
  position: relative;
  display: grid;
  width: min(100%, 390px);
  min-height: 190px;
  place-items: center;
}

.hero-topic-stack span {
  position: absolute;
  display: grid;
  width: 160px;
  height: 108px;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 12px 12px 0 var(--teal-soft);
  font: 700 2.3rem/1 Georgia, Cambria, serif;
}

.hero-topic-stack span:nth-child(odd) {
  margin: -48px 0 0 -100px;
  transform: rotate(-5deg);
}

.hero-topic-stack span:nth-child(even) {
  margin: 55px 0 0 110px;
  box-shadow: 12px 12px 0 var(--purple-soft);
  transform: rotate(5deg);
}

.hero-decimal-model {
  align-content: center;
  gap: 14px;
}

.hero-place-grid {
  display: grid;
  width: min(100%, 390px);
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: white;
  box-shadow: 14px 14px 0 var(--gold-soft);
  text-align: center;
}

.hero-place-grid span {
  padding: 9px;
  color: var(--muted);
  background: var(--teal-soft);
  font-size: 0.72rem;
  font-weight: 800;
}

.hero-place-grid b {
  padding: 22px 10px;
  font-size: 2.4rem;
}

.hero-place-grid i {
  position: absolute;
  align-self: end;
  justify-self: center;
  padding-bottom: 15px;
  font-size: 2.3rem;
  font-style: normal;
  font-weight: 900;
}

.hero-decimal {
  padding: 9px 16px;
  border-radius: 13px;
  color: white;
  background: var(--teal);
  font-size: 1.2rem;
  font-weight: 850;
}

.hero-percentage-model {
  align-content: center;
  gap: 18px;
}

.hero-percentage-track {
  position: relative;
  width: min(100%, 390px);
  height: 92px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(23, 49, 50, 0.16) calc(10% - 2px) 10%), white;
  box-shadow: 14px 14px 0 var(--gold-soft);
}

.hero-percentage-track span {
  position: absolute;
  inset: 0 65% 0 0;
  background: var(--teal-soft);
}

.hero-percentage-track i {
  position: relative;
  display: grid;
  height: 100%;
  place-items: center;
  font: 850 2.15rem/1 Georgia, Cambria, serif;
}

.hero-percentage-equation {
  padding: 10px 18px;
  border-radius: 14px;
  color: white;
  background: var(--teal);
  font-size: 1.05rem;
  font-weight: 850;
}

.percentage-strip-visual {
  display: grid;
  width: min(100%, 760px);
  gap: 18px;
}

.percentage-strip-visual.is-comparison {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.percentage-panel {
  display: grid;
  gap: 15px;
  padding: clamp(16px, 3vw, 26px);
  border: 1px solid rgba(23, 49, 50, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 15px 35px rgba(28, 55, 52, 0.08);
}

.percentage-panel h3 {
  margin: 0;
  font: 600 1.05rem/1.25 Georgia, Cambria, serif;
}

.percentage-role-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 9px;
}

.percentage-role-row span {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--teal-soft);
}

.percentage-role-row small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.percentage-role-row b {
  font-size: 1.05rem;
}

.percentage-track,
.percentage-amount-track {
  position: relative;
  min-height: 62px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background-color: white;
  background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgba(23, 49, 50, 0.18) 0);
  background-size: calc(100% / var(--partitions, 10)) 100%;
}

.percentage-track span,
.percentage-amount-track span {
  position: absolute;
  inset: 0 calc(100% - var(--percentage)) 0 0;
  background: var(--gold-soft);
  transition: inset var(--action-duration, 750ms) ease;
}

.percentage-track.has-major-groups,
.percentage-amount-track.has-major-groups {
  background-image:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(23, 49, 50, 0.16) 0),
    linear-gradient(90deg, transparent calc(100% - 3px), rgba(23, 49, 50, 0.5) 0);
  background-size:
    calc(100% / var(--partitions, 20)) 100%,
    calc(100% / var(--major-partitions, 10)) 100%;
}

.percentage-amount-track span {
  background: var(--teal-soft);
}

.percentage-track i,
.percentage-amount-track b,
.percentage-amount-track i {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 62px;
  place-items: center;
  font-style: normal;
  font-weight: 850;
}

.percentage-amount-track i {
  position: absolute;
  inset: 6px auto auto 10px;
  min-height: auto;
  padding: 3px 7px;
  border-radius: 8px;
  color: var(--teal-dark);
  background: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  line-height: 1.15;
}

.percentage-amount-track b {
  place-items: end center;
  padding: 6px 10px;
  font-size: 0.92rem;
}

.percentage-equation,
.percentage-solution {
  padding: 11px 14px;
  border-radius: 12px;
  background: #f4f1ea;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
}

.percentage-solution {
  color: var(--teal-dark);
  background: var(--success-soft);
}

.percentage-hundred-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  width: min(100%, 380px);
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: white;
}

.percentage-hundred-grid span {
  border-right: 1px solid rgba(23, 49, 50, 0.16);
  border-bottom: 1px solid rgba(23, 49, 50, 0.16);
}

.percentage-hundred-grid span:nth-child(10n) { border-right: 0; }
.percentage-hundred-grid span:nth-last-child(-n + 10) { border-bottom: 0; }
.percentage-hundred-grid span.is-selected { background: var(--gold-soft); }

.percentage-method-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: percentage-step;
}

.percentage-method-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f4f1ea;
  font-weight: 750;
}

.percentage-method-steps li::before {
  counter-increment: percentage-step;
  content: counter(percentage-step);
  display: grid;
  width: 1.7rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--teal);
  font-size: 0.78rem;
}

@media (max-width: 660px) {
  .percentage-strip-visual.is-comparison { grid-template-columns: 1fr; }
  .percentage-panel { padding: 14px; }
  .percentage-hundred-grid { width: min(100%, 290px); }
}

.topic-section {
  padding: clamp(54px, 8vw, 90px) 0 28px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.section-heading h2 {
  margin: 0;
  font-family: Georgia, Cambria, serif;
  font-size: clamp(2rem, 4vw, 3.3rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.section-heading p {
  margin: 0 0 8px;
  color: var(--muted);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.main-topic-grid {
  max-width: 1000px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.main-topic-card {
  min-height: 260px;
}

.main-topic-card h3 {
  min-height: 0;
  font: 500 1.8rem/1.1 Georgia, Cambria, serif;
}

.main-topic-card p {
  max-width: 35ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.topic-card {
  position: relative;
  display: grid;
  min-height: 215px;
  overflow: hidden;
  grid-template-columns: 1fr auto;
  align-content: space-between;
  gap: 16px;
  padding: 25px;
  border: 1px solid rgba(23, 49, 50, 0.12);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 9px 25px rgba(28, 55, 52, 0.05);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.topic-card:hover {
  z-index: 1;
  border-color: rgba(20, 125, 120, 0.38);
  box-shadow: 0 18px 42px rgba(28, 55, 52, 0.12);
  transform: translateY(-4px);
}

.topic-card::after {
  position: absolute;
  width: 92px;
  height: 92px;
  right: -40px;
  bottom: -40px;
  border-radius: 50%;
  background: var(--teal-soft);
  content: "";
}

.topic-card.motif-1::after { background: var(--purple-soft); }
.topic-card.motif-2::after { background: var(--coral-soft); }
.topic-card.motif-3::after { background: var(--gold-soft); }

.topic-number {
  color: #9daba8;
  font-family: Georgia, Cambria, serif;
  font-size: 2.4rem;
  line-height: 1;
}

.topic-card small {
  color: var(--teal-dark);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.11em;
}

.topic-card h3 {
  max-width: 22ch;
  min-height: 3.75em;
  margin: 8px 0 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.topic-status {
  align-self: end;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--muted);
  background: #edf1ee;
  font-size: 0.7rem;
  font-weight: 750;
}

.topic-status.complete {
  color: var(--success);
  background: var(--success-soft);
}

.topic-status.progress {
  color: #654284;
  background: var(--purple-soft);
}

.topic-arrow {
  position: relative;
  z-index: 2;
  align-self: end;
  font-size: 1.35rem;
}

.home-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(23, 49, 50, 0.1);
  color: var(--muted);
  font-size: 0.82rem;
}

.home-footer a {
  color: var(--teal-dark);
}

/* Lesson shell */

.lesson-shell,
.completion-shell {
  padding: 0 clamp(15px, 3vw, 48px) 40px;
}

.topbar-actions {
  display: flex;
  gap: 8px;
}

.quiet-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.48);
}

.lesson-progress {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr);
  align-items: center;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto 16px;
}

.lesson-progress > div:first-child {
  display: flex;
  min-width: 220px;
  justify-content: space-between;
  gap: 18px;
  font-size: 0.8rem;
}

.lesson-progress span {
  color: var(--muted);
}

.progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe1dc;
}

.progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #45aa8d);
  transition: width 450ms ease;
}

.lesson-main {
  max-width: 1180px;
  margin: 0 auto;
  outline: none;
}

.lesson-card {
  overflow: hidden;
  border: 1px solid rgba(23, 49, 50, 0.1);
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.teaching-surface {
  position: relative;
  padding: clamp(20px, 4vw, 44px) clamp(20px, 5vw, 70px) 0;
  background:
    linear-gradient(rgba(20, 125, 120, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 125, 120, 0.035) 1px, transparent 1px),
    linear-gradient(145deg, #f9fbf8, #f2f7f3);
  background-size: 28px 28px, 28px 28px, auto;
}

.math-canvas {
  display: grid;
  min-height: 420px;
  place-items: center;
  overflow: hidden;
  padding: 30px 24px 96px;
  border: 1px solid rgba(23, 49, 50, 0.08);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.82);
}

.visual-stage {
  width: min(100%, 850px);
}

.visual-centre,
.mixed-visual,
.multiplication-visual,
.cancellation-visual,
.division-visual,
.quantity-bar {
  display: grid;
  place-items: center;
  gap: 25px;
}

.area-visual {
  width: 100%;
}

.bar-stack {
  display: grid;
  width: min(100%, 640px);
  gap: 8px;
}

.fraction-bar {
  display: grid;
  width: 100%;
  height: clamp(42px, 6vw, 66px);
  grid-template-columns: repeat(var(--parts), minmax(1px, 1fr));
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: white;
}

.fraction-cell {
  min-width: 0;
  border-right: 1px solid rgba(23, 49, 50, 0.62);
  background: white;
}

.fraction-cell:last-child {
  border-right: 0;
}

.fraction-cell.is-shaded {
  background: var(--teal);
}

.selection-blue .is-shaded {
  background: #2f6fb5;
}

.selection-red .is-shaded {
  background: #c84f4f;
}

.selection-icing .is-shaded {
  background: #b56f9d;
}

.selection-used .is-shaded {
  background: #b96b4c;
}

.selection-remaining .is-shaded {
  background: var(--teal);
}

.fraction-bar.is-chocolate {
  border-color: #654435;
  background: #fbf3e8;
}

.fraction-bar.is-chocolate .fraction-cell {
  border-color: rgba(101, 68, 53, 0.65);
  background: #f5e4ce;
}

.fraction-bar.is-chocolate .fraction-cell.is-shaded {
  background: #7eaf9f;
}

.fraction-bar.is-ribbon {
  height: clamp(30px, 4vw, 46px);
  border-radius: 22px;
}

.fraction-bar.is-unequal {
  display: flex;
  border-color: var(--danger);
}

.fraction-bar.is-unequal .fraction-cell {
  flex: 1;
}

.fraction-bar.is-unequal .fraction-cell:nth-child(2n) {
  flex: 1.7;
}

.fraction-bar.is-unequal .fraction-cell:nth-child(3n) {
  flex: 0.65;
}

.contrast-model {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.contrast-model > div {
  display: grid;
  min-width: 0;
  gap: 10px;
  color: var(--muted);
  text-align: center;
}

.single-unequal-model {
  display: grid;
  width: min(100%, 640px);
  justify-items: center;
  gap: 12px;
  color: var(--danger);
  text-align: center;
}

.single-unequal-model .fraction-bar {
  width: 100%;
}

.circle-model {
  width: min(240px, 60vw);
  filter: drop-shadow(0 9px 18px rgba(23, 49, 50, 0.12));
}

.circle-piece {
  fill: white;
  stroke: var(--ink);
  stroke-width: 1.6;
}

.circle-piece.is-shaded {
  fill: var(--teal);
}

.circle-model.is-unequal .circle-piece {
  stroke: var(--danger);
  stroke-width: 2.1;
}

.set-model {
  display: flex;
  max-width: 480px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
}

.question-scaffold {
  display: flex;
  width: min(100%, 640px);
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.question-scaffold span {
  padding: 7px 11px;
  border: 1px solid rgba(23, 49, 50, 0.14);
  border-radius: 999px;
  background: #f7faf7;
  color: var(--muted);
  font-size: 0.79rem;
  font-weight: 750;
}

.model-choice-answer .choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.model-choice-card {
  display: grid;
  min-height: 118px;
  align-content: center;
  gap: 10px;
}

.model-choice-visual {
  display: block;
  width: 100%;
  pointer-events: none;
}

.model-choice-visual .bar-stack {
  width: 100%;
}

.model-choice-visual .fraction-bar {
  height: 38px;
  border-width: 2px;
  border-radius: 8px;
}

.model-choice-label {
  font-weight: 900;
}

.model-target-fraction {
  min-width: 150px;
  font-size: clamp(1.55rem, 4vw, 2.5rem);
  text-align: center;
}

@media (max-width: 640px) {
  .model-choice-answer .choice-grid {
    grid-template-columns: 1fr;
  }
}

.counter {
  width: 38px;
  height: 38px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: white;
}

.set-model.is-tile .counter {
  border-radius: 9px;
}

.set-model.is-cupcake .counter {
  position: relative;
  width: 42px;
  height: 32px;
  margin-top: 13px;
  border-radius: 5px 5px 11px 11px;
}

.set-model.is-cupcake .counter::before {
  position: absolute;
  right: -3px;
  bottom: 22px;
  left: -3px;
  height: 18px;
  border: 3px solid var(--ink);
  border-bottom: 0;
  border-radius: 50% 50% 7px 7px;
  background: white;
  content: "";
}

.set-model.is-cupcake .counter.is-shaded::before {
  background: #b56f9d;
}

.fraction-role-map {
  display: grid;
  width: min(100%, 690px);
  grid-template-columns: minmax(135px, 1fr) auto minmax(175px, 1fr);
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
}

.role-chip {
  display: grid;
  min-height: 92px;
  align-content: center;
  justify-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(23, 49, 50, 0.12);
  border-radius: 14px;
  background: #f7faf7;
  text-align: center;
}

.role-chip small {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.role-chip b {
  color: var(--teal-dark);
  font-size: 1.55rem;
}

.role-chip em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

.fraction-rule-visual {
  display: grid;
  gap: 38px;
}

.fraction-rule-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.fraction-rule-flow span {
  display: grid;
  min-height: 72px;
  place-items: center;
  padding: 14px;
  border: 2px solid rgba(20, 125, 120, 0.2);
  border-radius: 15px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: clamp(0.78rem, 2vw, 0.95rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
}

.fraction-rule-flow i {
  color: var(--purple);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 900;
}

/* FRA-01 reference teaching scenes. The cue classes are added by the shared narration timeline. */

.fra01-story {
  display: grid;
  width: min(100%, 760px);
  min-height: 280px;
  align-content: center;
  justify-items: center;
  gap: 22px;
}

.story-kicker {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.session-heading {
  display: flex;
  width: min(100%, 680px);
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.session-heading strong {
  font-size: clamp(1.35rem, 4vw, 2.15rem);
}

.session-heading span {
  color: var(--muted);
  font-weight: 750;
}

.session-bar,
.story-partition-bar {
  display: flex;
  width: min(100%, 680px);
  height: clamp(70px, 10vw, 96px);
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: white;
}

.session-turn {
  position: relative;
  display: grid;
  flex: 0 0 var(--turn-size, 25%);
  place-items: center;
  border-right: 2px solid var(--ink);
  opacity: 0;
  transition: flex-basis 900ms cubic-bezier(0.22, 1, 0.36, 1), background 420ms ease, opacity 280ms ease;
}

.session-turn:last-child {
  border-right: 0;
}

.session-turn:nth-child(1) { --turn-size: 13%; }
.session-turn:nth-child(2) { --turn-size: 21%; }
.session-turn:nth-child(3) { --turn-size: 29%; }
.session-turn:nth-child(4) { --turn-size: 37%; }

.session-turn b {
  color: var(--muted);
  font-size: clamp(0.66rem, 2vw, 0.82rem);
}

.session-turn i {
  display: none;
  font-style: normal;
  font-weight: 900;
}

.cue-reveal_unequal .session-turn {
  opacity: 1;
}

.cue-equalise_turns .session-turn {
  flex-basis: 25%;
  opacity: 1;
}

.cue-equalise_turns .session-turn b {
  display: none;
}

.cue-equalise_turns .session-turn i {
  display: block;
}

.cue-select_one_turn .session-turn:first-child {
  color: white;
  background: var(--teal);
}

.cue-show_whole .session-bar,
.cue-identify_whole .story-partition-bar {
  box-shadow: 0 0 0 8px rgba(20, 125, 120, 0.12);
}

.turn-verdict {
  min-height: 30px;
  color: var(--danger);
  font-weight: 850;
}

.unequal-verdict {
  opacity: 0;
  transition: opacity 280ms ease;
}

.cue-reveal_unequal .unequal-verdict {
  opacity: 1;
}

.equal-verdict,
.hook-fraction,
.structure-fraction,
.structure-labels span,
.vocabulary-chip,
.fraction-routine-story .routine-flow span,
.fraction-routine-story .routine-flow i,
.fraction-routine-story .fraction-role-map,
.whole-example,
.whole-message,
.handoff-label {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 360ms ease, transform 360ms ease;
}

.cue-equalise_turns .unequal-verdict {
  display: none;
}

.cue-equalise_turns .equal-verdict,
.cue-select_one_turn .hook-fraction,
.cue-split_equal .equal-label,
.cue-select_part .selected-label,
.cue-name_fraction .structure-fraction,
.cue-show_denominator .denominator-vocabulary,
.cue-show_numerator .numerator-vocabulary,
.cue-show_whole_step .routine-whole,
.cue-show_equal_step .routine-equal,
.cue-show_selected_step .routine-selected,
.cue-show_whole_step .routine-whole + i,
.cue-show_equal_step .routine-equal + i,
.cue-map_denominator .fraction-role-map,
.cue-show_short_whole .short-whole,
.cue-show_long_whole .long-whole,
.cue-compare_amounts .whole-message,
.cue-hand_over .handoff-label {
  opacity: 1;
  transform: none;
}

.story-fraction {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--teal-dark);
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  font-weight: 850;
}

.story-fraction .math-fraction,
.focus-fraction .math-fraction {
  font-size: 1.65em;
}

.story-partition-bar {
  display: grid;
  grid-template-columns: repeat(var(--story-parts), minmax(0, 1fr));
}

.story-cell {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  border-right: 2px solid transparent;
  background: white;
  transition: border-color 320ms ease, background 420ms ease;
}

.story-cell:last-child {
  border-right: 0;
}

.story-cell b {
  color: var(--muted);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.cue-split_equal .quarter-structure-story .story-cell,
.denominator-story .story-cell,
.numerator-story .story-cell,
.routine-model .story-cell,
.handoff-model .story-cell {
  border-color: rgba(23, 49, 50, 0.68);
}

.cue-split_equal .quarter-structure-story .story-cell b,
.cue-count_all_parts .denominator-story .story-cell b {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--story-index) * 100ms);
}

.cue-identify_whole .quarter-structure-story .story-partition-bar {
  box-shadow: 0 0 0 8px rgba(20, 125, 120, 0.12);
}

.cue-select_part .quarter-structure-story .story-cell:first-child,
.cue-select_first .numerator-story .story-cell:nth-child(1),
.cue-select_second .numerator-story .story-cell:nth-child(-n + 2),
.cue-select_third .numerator-story .story-cell:nth-child(-n + 3),
.routine-model .story-cell:nth-child(-n + 3),
.handoff-model .story-cell:nth-child(-n + 3) {
  background: var(--teal);
}

.cue-select_part .quarter-structure-story .story-cell:first-child b {
  color: white;
}

.structure-labels {
  display: flex;
  width: min(100%, 680px);
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-weight: 760;
}

.denominator-story,
.numerator-story {
  grid-template-columns: 1fr auto;
}

.denominator-story .story-partition-bar,
.numerator-story .story-partition-bar {
  grid-column: 1 / -1;
}

.focus-fraction {
  color: var(--ink);
  font-size: 1.35rem;
}

.vocabulary-chip {
  display: grid;
  min-width: 220px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 12px;
  padding: 12px 16px;
  border: 2px solid rgba(20, 125, 120, 0.22);
  border-radius: 14px;
  background: var(--teal-soft);
}

.vocabulary-chip strong {
  grid-row: 1 / 3;
  color: var(--teal-dark);
  font-size: 2rem;
}

.vocabulary-chip span {
  color: var(--muted);
  font-size: 0.78rem;
}

.vocabulary-chip b {
  color: var(--teal-dark);
  font-size: 0.92rem;
  opacity: 0;
  text-transform: uppercase;
  transition: opacity 300ms ease;
}

.cue-name_denominator .denominator-vocabulary b,
.cue-name_numerator .numerator-vocabulary b {
  opacity: 1;
}

.selection-counter {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: var(--muted);
  font-weight: 760;
}

.selection-counter strong {
  color: var(--teal-dark);
  font-size: 2rem;
}

.cue-select_first .selection-counter strong,
.cue-select_second .selection-counter strong,
.cue-select_third .selection-counter strong {
  font-size: 0;
}

.cue-select_first .selection-counter strong::after { content: "1"; font-size: 2rem; }
.cue-select_second .selection-counter strong::after { content: "2"; font-size: 2rem; }
.cue-select_third .selection-counter strong::after { content: "3"; font-size: 2rem; }

.numerator-story .focus-fraction,
.denominator-story .focus-fraction {
  opacity: 0.45;
}

.cue-show_numerator .numerator-story .focus-fraction,
.cue-show_denominator .denominator-story .focus-fraction {
  opacity: 1;
}

.routine-flow {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 11px;
}

.routine-flow span {
  display: grid;
  min-height: 70px;
  place-items: center;
  padding: 12px;
  border: 2px solid rgba(20, 125, 120, 0.22);
  border-radius: 14px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-weight: 850;
  text-align: center;
}

.routine-flow i {
  color: var(--purple);
  font-size: 1.5rem;
  font-style: normal;
}

.routine-model {
  display: grid;
  width: 100%;
  justify-items: center;
  gap: 18px;
}

.routine-model .story-partition-bar {
  height: 62px;
}

.cue-map_numerator .numerator-chip,
.cue-map_denominator .denominator-chip {
  box-shadow: 0 0 0 6px rgba(20, 125, 120, 0.12);
}

.fraction-routine-story .numerator-chip {
  opacity: 0;
  transition: opacity 340ms ease, box-shadow 340ms ease;
}

.cue-map_numerator .fraction-routine-story .numerator-chip {
  opacity: 1;
}

.whole-comparison-story {
  grid-template-columns: 1fr 1fr;
}

.whole-example {
  display: grid;
  width: 100%;
  justify-items: center;
  gap: 10px;
}

.half-bar {
  display: grid;
  width: 100%;
  height: 72px;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 13px;
}

.short-whole .half-bar { width: 66%; }
.half-bar span:first-child { border-right: 2px solid var(--ink); background: var(--teal); }
.whole-example small { color: var(--muted); font-weight: 760; }
.whole-fraction { opacity: 0; transition: opacity 320ms ease; }
.cue-show_fraction_labels .whole-fraction { opacity: 1; }
.whole-message { grid-column: 1 / -1; color: var(--purple); font-weight: 900; }

.handoff-model {
  position: relative;
  display: grid;
  width: 100%;
  justify-items: center;
  gap: 12px;
}

.scaffold-label {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 0.76rem;
  font-weight: 820;
  transition: opacity 500ms ease, transform 500ms ease;
}

.cue-fade_support .scaffold-label {
  opacity: 0;
  transform: translateY(-6px);
}

.handoff-label {
  color: var(--teal-dark);
  font-size: clamp(1.25rem, 4vw, 1.8rem);
}

.progressive-caption-lesson .action-highlight .is-shaded {
  animation: none;
}

.cue-focus_equal_lines .fraction-cell,
.cue-focus_equal_lines .circle-piece,
.cue-compare_sizes .fraction-cell,
.cue-compare_sizes .circle-piece {
  animation: focus-boundaries 900ms ease 1 both;
}

.cue-focus_selected .is-shaded {
  animation: focus-part 800ms ease 1 both;
}

.counter.is-shaded {
  background: var(--teal);
}

.set-model.selection-blue .counter.is-shaded {
  background: #2f6fb5;
}

.set-model.selection-red .counter.is-shaded {
  background: #c84f4f;
}

.set-model.selection-icing .counter.is-shaded {
  background: #b56f9d;
}

.math-fraction {
  display: inline-grid;
  min-width: 1.55em;
  grid-template-rows: auto 2px auto;
  place-items: center;
  margin: 0 0.12em;
  vertical-align: middle;
  font-weight: 760;
  line-height: 1.05;
}

.math-fraction i {
  width: 100%;
  height: 2px;
  background: currentColor;
}

.mixed-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
}

.role-visual {
  position: relative;
  display: grid;
  min-height: 290px;
  place-items: center;
}

.role-fraction {
  min-width: 2em;
  font-size: clamp(4rem, 10vw, 7rem);
}

.role-label {
  position: absolute;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 0.85rem;
  font-weight: 800;
}

.numerator-role { top: 22px; right: calc(50% + 75px); }
.denominator-role { bottom: 22px; left: calc(50% + 75px); }

.compare-visual,
.operation-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(13px, 3vw, 36px);
}

.compare-side,
.operand {
  display: grid;
  min-width: 0;
  flex: 1 1 0;
  place-items: center;
  gap: 14px;
  font-size: 1.3rem;
}

.compare-symbol,
.operation-symbol {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: white;
  font-size: 1.65rem;
  font-weight: 900;
}

.operation-result {
  flex: 0 0 auto;
  padding: 14px 17px;
  border-radius: 14px;
  color: var(--success);
  background: var(--success-soft);
  font-size: 1.3rem;
  font-weight: 800;
}

.number-line-pair {
  display: grid;
  gap: 30px;
  margin-bottom: 42px;
}

.number-line {
  position: relative;
  display: grid;
  width: min(100%, 760px);
  min-height: 72px;
  grid-template-columns: repeat(var(--intervals), minmax(2px, 1fr)) 0;
  align-items: start;
  padding-top: 22px;
  margin: 0 auto;
}

.number-line::before {
  position: absolute;
  top: 25px;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 99px;
  background: var(--ink);
  content: "";
}

.number-tick {
  position: relative;
  min-width: 0;
}

.number-tick i {
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 0;
  width: 3px;
  height: 19px;
  background: var(--ink);
}

.number-tick b {
  position: absolute;
  top: 22px;
  left: 0;
  white-space: nowrap;
  transform: translateX(-45%);
}

.number-tick.is-active i {
  top: -12px;
  width: 15px;
  height: 15px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 3px var(--coral);
}

.equation-card {
  width: fit-content;
  padding: 15px 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: white;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  font-weight: 750;
}

.large-equation {
  max-width: 850px;
  margin: 0 auto;
  font-size: clamp(1.15rem, 2.7vw, 1.65rem);
  line-height: 1.7;
  text-align: center;
}

.quantity-bar {
  width: min(100%, 690px);
}

.quantity-cells {
  display: grid;
  width: 100%;
  min-height: 90px;
  grid-template-columns: repeat(var(--parts), minmax(1px, 1fr));
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 15px;
}

.quantity-cells span {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--ink);
  background: white;
  font-weight: 800;
}

.quantity-cells span.is-shaded {
  color: white;
  background: var(--teal);
}

.quantity-labels {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
}

.area-grid {
  display: grid;
  width: min(320px, 72vw);
  aspect-ratio: 1;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  border: 3px solid var(--ink);
  background: white;
}

.area-grid span {
  border-right: 1px solid rgba(23, 49, 50, 0.45);
  border-bottom: 1px solid rgba(23, 49, 50, 0.45);
}

.area-grid .shade-a { background: var(--teal-soft); }
.area-grid .shade-b { box-shadow: inset 0 0 0 999px rgba(117, 83, 166, 0.18); }
.area-grid .overlap { background: var(--purple); box-shadow: none; }

.groups-visual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.mini-group {
  width: min(210px, 38vw);
}

.mini-group .fraction-bar {
  height: 48px;
}

.groups-brace {
  flex-basis: 100%;
  color: var(--muted);
  text-align: center;
  font-weight: 750;
}

.cancel-equation,
.reciprocal-visual {
  display: flex;
  align-items: center;
  gap: clamp(13px, 3vw, 27px);
  font-size: clamp(1.7rem, 5vw, 3.1rem);
}

.can-cancel {
  position: relative;
}

.can-cancel::after {
  position: absolute;
  width: 120%;
  height: 3px;
  top: 50%;
  left: -10%;
  background: var(--coral);
  content: "";
  transform: rotate(-35deg) scaleX(0);
  transform-origin: left;
}

.feedback-support .can-cancel::after,
.feedback-correct .can-cancel::after {
  transform: rotate(-35deg) scaleX(1);
}

.cancel-path,
.divisor-chip {
  padding: 9px 14px;
  border-radius: 999px;
  color: #6b4c18;
  background: var(--gold-soft);
  font-size: 0.78rem;
  font-weight: 800;
}

.reciprocal-card {
  display: grid;
  min-width: 110px;
  min-height: 120px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: white;
}

.reciprocal-card.is-question {
  border-style: dashed;
  color: var(--purple);
  background: var(--purple-soft);
}

.division-visual {
  width: min(100%, 700px);
}

.measure-bar {
  width: 100%;
}

.multi-model {
  display: grid;
  gap: 38px;
}

/* Semantic animation states */

.action-fade_in .visual-stage,
.action-crossfade_phase .visual-stage {
  animation: fade-math 650ms ease both;
}

.action-subdivide .fraction-cell,
.action-subdivide_each_partition .fraction-cell,
.action-partition_or_group .fraction-cell,
.action-transform_representation .fraction-cell {
  animation: reveal-partition 620ms ease both;
  animation-delay: var(--partition-delay, 0ms);
}

.action-partition_or_group .fraction-cell.is-shaded,
.action-transform_representation .fraction-cell.is-shaded {
  animation: shade-part var(--action-duration, 800ms) ease both;
  animation-delay: calc(var(--cue-delay, 0ms) + var(--cell-delay, 0ms));
}

.action-transform_representation .circle-piece.is-shaded {
  animation: shade-circle var(--action-duration, 800ms) ease both;
  animation-delay: calc(var(--cue-delay, 0ms) + var(--cell-delay, 0ms));
}

.action-reveal_equation .fraction-role-map,
.action-reveal_rule .fraction-rule-flow,
.action-reveal_rule .fraction-role-map {
  animation: fade-math var(--action-duration, 800ms) ease both;
  animation-delay: var(--cue-delay, 0ms);
}

.action-reveal_rule .fraction-role-map {
  animation-delay: calc(var(--cue-delay, 0ms) + 650ms);
}

.action-fade_scaffolds .fraction-rule-flow {
  animation: fade-scaffolds var(--action-duration, 800ms) ease both;
  animation-delay: var(--cue-delay, 0ms);
}

.action-shade .is-shaded,
.action-highlight .is-shaded,
.feedback-hint .is-shaded {
  animation: focus-part 900ms ease 1 both;
}

.action-combine .operand:first-child {
  animation: combine-left 750ms ease both;
}

.action-combine .operand:nth-child(3) {
  animation: combine-right 750ms ease both;
}

.action-remove .is-shaded:last-child {
  animation: remove-part 700ms ease both;
}

.feedback-correct .visual-stage {
  filter: drop-shadow(0 0 18px rgba(25, 113, 80, 0.12));
}

.feedback-support .visual-stage {
  outline: 3px solid rgba(212, 155, 54, 0.32);
  outline-offset: 12px;
  border-radius: 16px;
}

.feedback-hint .fraction-bar,
.feedback-hint .circle-model,
.feedback-hint .set-model {
  animation: focus-boundaries 900ms ease 1 both;
}

@keyframes fade-math {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes reveal-partition {
  from { border-color: transparent; background: white; }
  to { opacity: 1; }
}

@keyframes focus-part {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

@keyframes shade-part {
  from { background: white; }
  to { background: var(--teal); }
}

@keyframes shade-circle {
  from { fill: white; }
  to { fill: var(--teal); }
}

@keyframes focus-boundaries {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 10px rgba(20, 125, 120, 0.35)); }
}

@keyframes fade-scaffolds {
  from { opacity: 1; }
  to { opacity: 0.32; }
}

@keyframes combine-left {
  from { transform: translateX(-18px); }
  to { transform: none; }
}

@keyframes combine-right {
  from { transform: translateX(18px); }
  to { transform: none; }
}

@keyframes remove-part {
  from { opacity: 1; }
  to { opacity: 0.2; background: white; }
}

/* Decimal mathematical primitives */

.decimal-place-visual,
.decimal-line-visual,
.decimal-order-visual,
.decimal-column-visual,
.decimal-context-visual,
.decimal-area-visual,
.decimal-groups-visual,
.long-division-visual,
.division-scaler-visual,
.sign-magnitude-visual {
  display: grid;
  width: 100%;
  place-items: center;
  gap: 22px;
}

.decimal-place-visual {
  position: relative;
  overflow-x: auto;
  padding: 6px;
}

.decimal-place-grid {
  display: grid;
  width: min(100%, 760px);
  min-width: 540px;
  grid-template-columns: repeat(6, minmax(72px, 1fr));
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: white;
}

.place-heading {
  padding: 9px 5px;
  border-right: 1px solid rgba(23, 49, 50, 0.2);
  color: var(--muted);
  background: var(--teal-soft);
  font-size: 0.67rem;
  font-weight: 850;
  text-align: center;
}

.place-digit {
  display: grid;
  min-height: 78px;
  place-items: center;
  border-top: 2px solid var(--ink);
  border-right: 1px solid rgba(23, 49, 50, 0.3);
  font-size: clamp(1.75rem, 5vw, 2.9rem);
}

.place-heading:nth-child(6),
.place-digit:last-child {
  border-right: 0;
}

.place-digit.decimal-boundary {
  border-left: 5px solid var(--coral);
}

.place-digit.is-empty {
  color: #bdc8c4;
  background: #fbfcfa;
}

.place-value-sign {
  position: absolute;
  z-index: 2;
  top: 65px;
  left: max(5px, calc(50% - 410px));
  color: var(--coral);
  font-size: 2.5rem;
  font-weight: 900;
}

.place-shift {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.place-shift i {
  width: clamp(80px, 18vw, 180px);
  height: 3px;
  border-radius: 99px;
  background: var(--teal);
}

.decimal-equation {
  max-width: min(100%, 760px);
  overflow-wrap: anywhere;
  text-align: center;
}

.decimal-number-line {
  display: block;
  width: min(100%, 820px);
  overflow: visible;
}

.decimal-number-line line {
  stroke: var(--ink);
  stroke-width: 2;
}

.decimal-number-line .decimal-line-axis {
  stroke-width: 4;
}

.decimal-number-line text {
  fill: var(--ink);
  font-size: 14px;
  font-weight: 750;
  text-anchor: middle;
}

.decimal-marker circle {
  fill: var(--coral);
  stroke: white;
  stroke-width: 4;
}

.decimal-marker.marker-1 circle { fill: var(--teal); }
.decimal-marker.marker-2 circle { fill: var(--purple); }
.decimal-marker.marker-3 circle { fill: var(--gold); }

.ordering-cards,
.quantity-chain,
.scale-row,
.sign-rule,
.magnitude-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ordering-cards span,
.quantity-chain span,
.quantity-chain strong,
.scale-row span,
.scale-row strong,
.sign-rule span,
.sign-rule strong,
.magnitude-row span,
.magnitude-row strong {
  padding: 14px 17px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: white;
  font-size: clamp(1rem, 3vw, 1.35rem);
  font-weight: 850;
}

.ordering-cards i,
.quantity-chain i,
.scale-row i,
.sign-rule i,
.sign-rule b,
.magnitude-row i {
  color: var(--teal-dark);
  font-style: normal;
  font-weight: 900;
}

.column-calculation {
  display: grid;
  min-width: 250px;
  grid-template-columns: 40px 1fr;
  align-items: center;
  padding: 22px 30px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 10px 28px rgba(23, 49, 50, 0.1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.column-calculation b,
.column-calculation strong {
  padding: 4px 0;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  letter-spacing: 0.08em;
}

.column-calculation span {
  font-size: 1.5rem;
  font-weight: 900;
}

.column-calculation i {
  height: 3px;
  grid-column: 1 / -1;
  margin: 7px 0;
  background: var(--ink);
}

.column-place-label {
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.context-strip {
  width: min(100%, 650px);
  height: 30px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: white;
}

.context-strip i {
  display: block;
  width: 68%;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #45aa8d);
}

.decimal-hundred-grid {
  display: grid;
  width: min(260px, 66vw);
  aspect-ratio: 1;
  grid-template-columns: repeat(10, 1fr);
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 11px;
  background: white;
}

.decimal-hundred-grid span {
  border-right: 1px solid rgba(23, 49, 50, 0.22);
  border-bottom: 1px solid rgba(23, 49, 50, 0.22);
}

.decimal-hundred-grid span.is-shaded {
  background: var(--teal);
}

.decimal-groups {
  display: flex;
  max-width: 690px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.decimal-groups span {
  display: grid;
  min-width: 78px;
  min-height: 56px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: var(--teal-soft);
  font-weight: 850;
}

.long-division {
  display: grid;
  grid-template-columns: auto 18px minmax(110px, auto);
  grid-template-rows: auto auto;
  align-items: end;
  gap: 0 9px;
  padding: 20px 28px;
  font-size: clamp(1.8rem, 6vw, 3rem);
  font-variant-numeric: tabular-nums;
}

.long-division span { grid-column: 1; grid-row: 2; }
.long-division i { height: 72px; grid-column: 2; grid-row: 2; border-top: 4px solid var(--ink); border-right: 4px solid var(--ink); border-radius: 0 18px 0 0; }
.long-division b { grid-column: 3; grid-row: 2; padding: 10px; }
.long-division strong { grid-column: 3; grid-row: 1; padding: 0 10px 8px; color: var(--teal-dark); text-align: center; }

.scale-row i {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--gold-soft);
  font-size: 0.78rem;
}

.sign-rule span,
.sign-rule strong {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: white;
  background: var(--purple);
  font-size: 1.8rem;
}

.sign-rule strong {
  background: var(--teal);
}

.decimal-answer input {
  width: clamp(125px, 30vw, 190px);
}

/* Ryan and interaction */

.ryan-panel {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(91%, 820px);
  min-height: 112px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 17px;
  padding: 17px 18px;
  margin: -68px auto 0;
  border: 1px solid rgba(23, 49, 50, 0.13);
  border-radius: 20px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 14px 32px rgba(26, 55, 52, 0.13);
}

.ryan-panel[hidden] {
  display: none;
}

.ryan-identity {
  display: grid;
  place-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
}

.ryan-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50% 50% 43% 47%;
  color: white;
  background: var(--purple);
  font-weight: 900;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08);
}

.ryan-panel p {
  margin: 0;
  font-size: clamp(0.94rem, 1.8vw, 1.05rem);
  line-height: 1.55;
}

.ryan-panel.is-speaking .ryan-avatar {
  box-shadow: 0 0 0 7px rgba(117, 83, 166, 0.12), inset 0 -4px 0 rgba(0, 0, 0, 0.08);
}

.narration-controls {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.narration-controls button {
  min-width: 66px;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  color: var(--teal-dark);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 750;
  cursor: pointer;
}

.narration-controls button:hover {
  background: var(--teal-soft);
}

.has-canvas-captions {
  padding-bottom: clamp(18px, 3vw, 32px);
}

.progressive-caption-lesson .math-canvas {
  min-height: 500px;
  padding-bottom: clamp(112px, 15vw, 138px);
}

.progressive-caption-lesson .math-canvas:has([data-primitive="fra01_context"]) {
  min-height: 390px;
  padding: 24px 24px 112px;
}

.progressive-caption-lesson .math-canvas:has(.fra01-choice-canvas) {
  min-height: 230px;
  padding-top: 18px;
}

.canvas-caption-layer {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.canvas-caption-layer[hidden] {
  display: none;
}

.canvas-caption {
  position: absolute;
  right: clamp(30px, 7vw, 95px);
  bottom: clamp(38px, 6vw, 68px);
  left: clamp(30px, 7vw, 95px);
  width: fit-content;
  max-width: min(760px, calc(100% - 60px));
  min-height: 50px;
  padding: 12px 18px;
  margin: 0 auto;
  border-radius: 14px;
  color: white;
  background: rgba(23, 49, 50, 0.94);
  box-shadow: 0 10px 25px rgba(23, 49, 50, 0.2);
  font-size: clamp(0.94rem, 2vw, 1.08rem);
  font-weight: 650;
  line-height: 1.45;
  text-align: left;
  transition: opacity 120ms ease, transform 120ms ease;
}

.canvas-caption:empty {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
}

.fra05-caption-layer .canvas-caption {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
  visibility: hidden;
}

.fra05-caption-layer.has-caption-text .canvas-caption {
  min-height: 50px;
  padding: 12px 18px;
  background: rgba(23, 49, 50, 0.94);
  box-shadow: 0 10px 25px rgba(23, 49, 50, 0.2);
  opacity: 1;
  visibility: visible;
}

.caption-current-word {
  color: #ffe6a3;
}

.canvas-caption-layer.is-complete .canvas-caption {
  opacity: 0;
  transform: translateY(5px);
}

.canvas-narration-controls {
  position: absolute;
  top: clamp(24px, 5vw, 50px);
  right: clamp(24px, 6vw, 82px);
  display: flex;
  flex-direction: row;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(23, 49, 50, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  pointer-events: auto;
}

.canvas-narration-controls button {
  min-width: 0;
  padding: 6px 9px;
  border: 0;
  border-radius: 7px;
  color: var(--teal-dark);
  background: transparent;
  font-size: 0.72rem;
  font-weight: 780;
  cursor: pointer;
}

.canvas-narration-controls button:hover,
.canvas-narration-controls button:focus-visible {
  background: var(--teal-soft);
}

.completion-caption-layer {
  display: grid;
  width: min(100%, 760px);
  min-height: 92px;
  place-items: center;
  padding: 12px 0;
}

.completion-caption-layer .canvas-caption {
  position: static;
  width: fit-content;
  max-width: 100%;
}

.completion-caption-layer .canvas-narration-controls {
  position: static;
  margin-top: 8px;
}

.interaction {
  min-height: 245px;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 7vw, 95px) 22px;
}

.scene-copy {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.scene-copy h1,
.question-header h1 {
  margin: 0;
  font-family: Georgia, Cambria, serif;
  font-size: clamp(1.65rem, 4vw, 2.65rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.25;
}

.question-header {
  max-width: 820px;
  margin: 0 auto 28px;
  text-align: center;
}

.question-header h1 .math-fraction {
  font-family: Inter, Aptos, "Segoe UI", system-ui, sans-serif;
  font-size: 0.8em;
}

.answer-form {
  display: grid;
  max-width: 790px;
  justify-items: center;
  gap: 22px;
  margin: 0 auto;
}

.single-answer,
.mixed-answer label {
  display: grid;
  justify-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.single-answer input,
.fraction-input input,
.mixed-answer input {
  width: 88px;
  height: 62px;
  border: 2px solid #aabbb6;
  border-radius: 14px;
  color: var(--ink);
  background: white;
  font-size: 1.5rem;
  font-weight: 820;
  text-align: center;
}

.single-answer input:focus,
.fraction-input input:focus,
.mixed-answer input:focus {
  border-color: var(--teal);
  box-shadow: var(--focus);
}

.answer-form.has-error input {
  border-color: var(--danger);
}

.fraction-answer,
.mixed-answer,
.choice-answer,
.order-answer {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
}

.fraction-answer legend,
.mixed-answer legend,
.choice-answer legend,
.order-answer legend {
  margin: 0 auto 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.fraction-input {
  display: grid;
  width: 96px;
  grid-template-rows: auto 3px auto;
  gap: 6px;
  place-items: center;
}

.fraction-input i {
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: var(--ink);
}

.mixed-answer {
  grid-template-columns: auto auto;
  align-items: center;
  gap: 20px;
}

.mixed-answer legend {
  grid-column: 1 / -1;
}

.choice-grid {
  display: grid;
  min-width: min(620px, 80vw);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.choice-card,
.order-option {
  min-height: 58px;
  padding: 12px 17px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: white;
  font-weight: 750;
  cursor: pointer;
}

.choice-card:hover:not(:disabled),
.order-option:hover:not(:disabled) {
  border-color: var(--teal);
  background: #f7fbfa;
}

.choice-card.is-selected {
  border-color: var(--teal);
  background: var(--teal-soft);
  box-shadow: var(--focus);
}

.choice-card:disabled,
.order-option:disabled {
  cursor: default;
  opacity: 0.75;
}

.choice-card.is-selected:disabled {
  opacity: 1;
}

.order-result {
  display: flex;
  min-height: 66px;
  min-width: min(560px, 78vw);
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px;
  border: 2px dashed #b5c3bf;
  border-radius: 14px;
  background: #fbfcfa;
}

.order-result span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
}

.order-result em {
  color: var(--muted);
  font-size: 0.85rem;
}

.order-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.reset-order {
  padding: 7px 10px;
  border: 0;
  color: var(--teal-dark);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  text-decoration: underline;
}

.feedback-slot {
  width: 100%;
}

.feedback-card {
  width: min(100%, 720px);
  padding: 17px 20px;
  margin: 0 auto;
  border-left: 5px solid var(--teal);
  border-radius: 13px;
  background: var(--teal-soft);
}

.feedback-card.correct {
  border-color: var(--success);
  background: var(--success-soft);
}

.feedback-card.hint {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.feedback-card.support {
  border-color: var(--purple);
  background: var(--purple-soft);
}

.feedback-card.saved {
  border-color: #71807b;
  background: #eef1ef;
}

.feedback-card strong {
  display: block;
  margin-bottom: 7px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.feedback-card p {
  margin: 6px 0 0;
  line-height: 1.55;
}

.lesson-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 20px clamp(24px, 7vw, 95px) 26px;
  border-top: 1px solid #e8ebe7;
}

/* Developer panel */

.developer-toggle {
  position: fixed;
  z-index: 30;
  right: 16px;
  bottom: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(23, 49, 50, 0.18);
  border-radius: 50%;
  color: #526260;
  background: rgba(255, 255, 255, 0.94);
  font-family: Consolas, monospace;
  font-size: 0.72rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(23, 49, 50, 0.14);
}

.developer-panel {
  position: fixed;
  z-index: 29;
  right: 16px;
  bottom: 62px;
  width: min(290px, calc(100vw - 32px));
  padding: 15px;
  border: 1px solid #c6d0cd;
  border-radius: 14px;
  color: #e9f3f1;
  background: rgba(23, 49, 50, 0.96);
  box-shadow: 0 14px 36px rgba(23, 49, 50, 0.24);
  font: 0.74rem/1.4 Consolas, monospace;
}

.developer-panel[hidden] {
  display: none;
}

.developer-panel dl {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
}

.developer-panel dl div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
}

.developer-panel dt { color: #a9c4bf; }
.developer-panel dd { margin: 0; overflow-wrap: anywhere; }

.developer-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.developer-actions button {
  padding: 7px;
  border: 1px solid rgba(233, 243, 241, 0.22);
  border-radius: 7px;
  color: #e9f3f1;
  background: rgba(255, 255, 255, 0.07);
  font: inherit;
  cursor: pointer;
}

.developer-actions button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.toast {
  position: fixed;
  z-index: 50;
  right: 24px;
  bottom: 24px;
  max-width: 330px;
  padding: 12px 15px;
  border-radius: 11px;
  color: white;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: none;
}

.restart-dialog {
  width: min(470px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 28px 80px rgba(18, 39, 38, 0.32);
}

.restart-dialog::backdrop {
  background: rgba(17, 35, 35, 0.52);
  backdrop-filter: blur(3px);
}

.restart-dialog form {
  padding: 30px;
}

.restart-dialog h2 {
  margin: 2px 0 10px;
  font: 500 2rem/1.1 Georgia, serif;
}

.restart-dialog p {
  margin: 0 0 24px;
  color: var(--muted);
}

.restart-dialog form > div {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

/* Completion */

.completion-main {
  display: grid;
  min-height: calc(100vh - 130px);
  place-items: center;
  padding: 30px 0 60px;
  outline: none;
}

.completion-card {
  position: relative;
  display: grid;
  width: min(100%, 820px);
  overflow: hidden;
  justify-items: center;
  padding: clamp(38px, 7vw, 78px);
  border: 1px solid rgba(23, 49, 50, 0.1);
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: center;
}

.completion-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  background: var(--teal);
  content: "";
}

.completion-card.needs-work::before {
  background: var(--gold);
}

.completion-card h1 {
  margin: 4px 0 22px;
  font-family: Georgia, Cambria, serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.055em;
}

.completion-orbit {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 27px;
  border: 3px solid var(--teal);
  border-radius: 50%;
}

.completion-orbit span {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: var(--teal-soft);
}

.completion-orbit i {
  position: absolute;
  width: 24px;
  height: 24px;
  top: -8px;
  left: 48px;
  border: 4px solid white;
  border-radius: 50%;
  background: var(--coral);
}

.completion-ryan {
  display: grid;
  max-width: 640px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding: 18px 21px;
  border-radius: 18px;
  background: var(--purple-soft);
  text-align: left;
}

.completion-ryan strong {
  display: block;
  margin-bottom: 4px;
  color: #5d4778;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.completion-ryan p {
  margin: 0;
  line-height: 1.6;
}

.completion-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

/* Loading and errors */

.loading-screen,
.error-screen {
  display: grid;
  min-height: 100vh;
  place-content: center;
  justify-items: center;
  padding: 30px;
  text-align: center;
  outline: none;
}

.loading-screen p {
  color: var(--muted);
  font-weight: 700;
}

.loading-mark {
  animation: loading-turn 1.2s ease-in-out infinite alternate;
}

.error-screen h1 {
  margin: 5px 0 12px;
  font-family: Georgia, Cambria, serif;
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 500;
}

.error-screen p {
  max-width: 700px;
  margin: 0 0 25px;
  color: var(--danger);
  line-height: 1.6;
}

@keyframes loading-turn {
  from { transform: rotate(-5deg); }
  to { transform: rotate(5deg); }
}

@media (max-width: 1050px) {
  .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-hero { grid-template-columns: 1fr minmax(240px, 0.65fr); }
  .brand-button strong { max-width: 34ch; }
}

@media (max-width: 760px) {
  .home-shell,
  .lesson-shell,
  .completion-shell { padding-right: 13px; padding-left: 13px; }
  .prototype-pill { display: none; }
  .home-hero { min-height: 0; grid-template-columns: 1fr; padding: 34px 25px; }
  .home-hero h1 { max-width: 10ch; }
  .hero-model { min-height: 150px; }
  .hero-bars { height: 70px; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-card { min-height: 190px; padding: 19px; }
  .section-heading { align-items: start; flex-direction: column; }
  .section-heading p { margin-top: -10px; }
  .home-footer { align-items: flex-start; flex-direction: column; }
  .topbar { min-height: 78px; }
  .brand-button .brand-mark { width: 40px; height: 40px; }
  .brand-button strong { max-width: 31ch; font-size: 0.91rem; }
  .quiet-button span:last-child { display: none; }
  .quiet-button { min-width: 44px; justify-content: center; }
  .lesson-progress { grid-template-columns: 1fr; gap: 8px; }
  .lesson-progress > div:first-child { min-width: 0; }
  .teaching-surface { padding: 12px 12px 0; }
  .math-canvas { min-height: 340px; padding: 24px 12px 93px; }
  .progressive-caption-lesson .math-canvas { min-height: 430px; padding: 58px 12px 112px; }
  .canvas-caption { right: 24px; bottom: 30px; left: 24px; max-width: calc(100% - 48px); }
  .canvas-narration-controls { top: 22px; right: 22px; }
  .fra01-story { min-height: 250px; gap: 16px; }
  .session-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .session-bar,
  .story-partition-bar { height: 72px; }
  .denominator-story,
  .numerator-story { grid-template-columns: 1fr; }
  .denominator-story .story-partition-bar,
  .numerator-story .story-partition-bar { grid-column: 1; }
  .routine-flow { grid-template-columns: 1fr; }
  .routine-flow i { transform: rotate(90deg); }
  .whole-comparison-story { gap: 14px; }
  .ryan-panel { width: calc(100% - 18px); grid-template-columns: auto 1fr; gap: 12px; padding: 14px; }
  .narration-controls { grid-column: 1 / -1; flex-direction: row; justify-content: end; }
  .interaction { padding: 32px 19px 17px; }
  .lesson-footer { padding: 17px 19px 22px; }
  .choice-grid { min-width: 0; width: 100%; }
  .compare-visual,
  .operation-visual { gap: 8px; }
  .compare-symbol,
  .operation-symbol { width: 42px; height: 42px; font-size: 1.2rem; }
  .contrast-model { grid-template-columns: 1fr; }
  .fraction-role-map { grid-template-columns: 1fr; gap: 10px; }
  .role-chip { width: 100%; min-height: 68px; }
  .fraction-rule-flow { grid-template-columns: 1fr; }
  .fraction-rule-flow i { transform: rotate(90deg); }
  .fraction-rule-visual { gap: 24px; }
  .role-label { position: static; }
  .role-visual { display: flex; min-height: 260px; flex-direction: column; justify-content: center; gap: 14px; }
  .operation-result { flex-basis: 100%; }
  .operation-visual { flex-wrap: wrap; }
  .home-nav-actions .prototype-pill { display: none; }
  .decimal-place-grid { min-width: 460px; grid-template-columns: repeat(6, minmax(60px, 1fr)); }
  .place-heading { font-size: 0.6rem; }
  .place-digit { min-height: 66px; }
  .quantity-chain,
  .scale-row { gap: 7px; }
}

@media (max-width: 470px) {
  .topic-grid { grid-template-columns: 1fr; }
  .topic-card { min-height: 165px; }
  .topic-card h3 { min-height: 0; }
  .home-topbar { min-height: 76px; }
  .home-hero h1 { font-size: 2.8rem; }
  .brand-button strong { max-width: 20ch; }
  .choice-grid { grid-template-columns: 1fr; }
  .lesson-footer { grid-template-columns: auto 1fr; }
  .lesson-footer .primary-button { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .lesson-footer .secondary-button { grid-row: 2; }
  .mixed-answer { gap: 12px; }
  .single-answer input,
  .fraction-input input,
  .mixed-answer input { width: 75px; height: 55px; }
  .math-canvas { min-height: 310px; }
  .progressive-caption-lesson .math-canvas { min-height: 420px; }
  .canvas-caption { right: 18px; bottom: 24px; left: 18px; max-width: calc(100% - 36px); padding: 10px 13px; }
  .canvas-narration-controls { top: 18px; right: 18px; }
  .session-turn b { writing-mode: vertical-rl; }
  .structure-labels { align-items: flex-start; flex-direction: column; gap: 5px; }
  .whole-comparison-story { grid-template-columns: 1fr; }
  .whole-message { grid-column: 1; }
  .short-whole .half-bar { width: 78%; }
  .fraction-bar { border-width: 2px; }
  .cancel-equation,
  .reciprocal-visual { gap: 8px; font-size: 1.45rem; }
  .reciprocal-card { min-width: 78px; min-height: 94px; }
  .completion-card { padding: 42px 21px; }
  .completion-ryan { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .completion-actions { width: 100%; }
  .completion-actions button { width: 100%; }
  .home-nav-actions { gap: 5px; }
  .topic-back { padding: 9px 10px; }
  .hero-topic-stack span { width: 130px; height: 90px; font-size: 1.8rem; }
  .hero-topic-stack span:nth-child(odd) { margin-left: -75px; }
  .hero-topic-stack span:nth-child(even) { margin-left: 80px; }
  .decimal-place-grid { min-width: 410px; grid-template-columns: repeat(6, minmax(53px, 1fr)); }
  .place-heading { overflow-wrap: anywhere; }
  .ordering-cards span,
  .quantity-chain span,
  .quantity-chain strong,
  .scale-row span,
  .scale-row strong { padding: 10px 12px; }
}

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

  .action-subdivide .fraction-cell,
  .action-subdivide_each_partition .fraction-cell,
  .action-partition_or_group .fraction-cell,
  .action-transform_representation .fraction-cell {
    opacity: 1;
  }

  .session-turn,
  .story-cell,
  .scaffold-label,
  .canvas-caption,
  .fraction-routine-story .routine-flow span,
  .fraction-routine-story .routine-flow i,
  .fraction-routine-story .fraction-role-map,
  .whole-example,
  .whole-message,
  .handoff-label {
    transition-duration: 1ms !important;
  }

  .worked-steps li {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (forced-colors: active) {
  .fraction-cell.is-shaded,
  .circle-piece.is-shaded,
  .counter.is-shaded,
  .quantity-cells span.is-shaded {
    forced-color-adjust: none;
    background: Highlight;
  }

  .decimal-hundred-grid span.is-shaded,
  .context-strip i,
  .decimal-marker circle {
    forced-color-adjust: none;
    background: Highlight;
    fill: Highlight;
  }
}

/* Canonical FRA-01 v2: storyboard-faithful contextual models and support controls. */
.fra01-context-visual {
  width: min(100%, 880px);
  min-height: 270px;
  display: grid;
  place-items: center;
}

.fra01-teach-context,
.fra01-question-context,
.fra01-hook,
.fra01-equal-repair,
.fra01-choice-canvas {
  width: min(100%, 780px);
  min-height: 250px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
}

.fra01-whole-outline {
  width: min(100%, 680px);
  display: grid;
  place-items: center;
  padding: 16px;
  border: 3px solid transparent;
  border-radius: 22px;
  transition: border-color 420ms ease, box-shadow 420ms ease;
}

.cue-focus_whole .variant-teach_whole .fra01-whole-outline,
.cue-show_boundary .variant-teach_set .fra01-whole-outline {
  border-color: var(--blue, #2778b8);
  box-shadow: 0 0 0 7px rgba(39, 120, 184, 0.1);
}

.fra01-segmented {
  position: relative;
  width: min(100%, 650px);
  min-height: 104px;
  display: flex;
  overflow: hidden;
  border: 5px solid #5e3b28;
  border-radius: 15px;
  background: #a96e42;
  box-shadow: 0 10px 22px rgba(68, 39, 23, 0.16);
}

.variant-teach_whole .fra01-segmented::after,
.variant-teach_several .fra01-segmented::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%), #a96c40;
  opacity: 1;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.variant-teach_several .fra01-segmented::after {
  background:
    radial-gradient(circle at 24% 35%, rgba(59,28,18,.45) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 62%, rgba(59,28,18,.38) 0 3px, transparent 4px),
    #7d472e;
}

.cue-partition_four .variant-teach_whole .fra01-segmented::after,
.cue-partition_five .variant-teach_several .fra01-segmented::after { opacity: 0; }

.fra01-segmented.is-board,
.fra01-segmented.is-plank,
.fra01-segmented.is-strip {
  min-height: 88px;
  border-width: 3px;
  border-color: #76451f;
  border-radius: 10px;
  background: #ad7442;
  box-shadow: 0 9px 18px rgba(75, 45, 19, 0.14);
}

.fra01-segmented.is-brownie_tray {
  min-height: 112px;
  border-color: #4c2f24;
  background: #7f492d;
}

.fra01-segmented.is-compact { min-height: 74px; }

.fra01-piece {
  position: relative;
  min-width: 0;
  flex: var(--piece-grow, 1) 1 0;
  overflow: hidden;
  border-right: 2px solid rgba(76, 43, 25, 0.72);
  background:
    linear-gradient(115deg, rgba(255,255,255,0.08), transparent 34%),
    #aa7044;
  transition: flex 700ms cubic-bezier(.2,.78,.2,1), background 360ms ease, opacity 320ms ease, transform 420ms ease;
}

.fra01-piece:last-child { border-right: 0; }

.fra01-segmented.is-chocolate_bar .fra01-piece {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.09), transparent 34%),
    #985c34;
  box-shadow: inset 0 0 0 5px rgba(82, 43, 24, 0.12);
}

.fra01-segmented.is-board .fra01-piece,
.fra01-segmented.is-plank .fra01-piece,
.fra01-segmented.is-strip .fra01-piece {
  background:
    linear-gradient(6deg, transparent 48%, rgba(238, 194, 139, 0.34) 49%, rgba(238, 194, 139, 0.34) 51%, transparent 52%),
    linear-gradient(105deg, #bd824d, #a76534);
}

.fra01-segmented.is-board .fra01-piece.is-selected,
.fra01-segmented.is-plank .fra01-piece.is-selected,
.fra01-segmented.is-strip .fra01-piece.is-selected {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.22) 0 5px, transparent 5px 11px),
    #3888c8;
}

.fra01-segmented.is-brownie_tray .fra01-piece {
  background:
    radial-gradient(circle at 24% 35%, rgba(59,28,18,.45) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 62%, rgba(59,28,18,.38) 0 3px, transparent 4px),
    #7d472e;
}

.fra01-segmented.is-brownie_tray .fra01-piece.is-selected::after {
  content: "";
  position: absolute;
  inset: 10px 8px auto;
  height: 31px;
  border: 2px solid #a85870;
  border-radius: 9px 9px 13px 13px;
  background:
    repeating-linear-gradient(145deg, rgba(255,255,255,.32) 0 4px, transparent 4px 9px),
    #e498ad;
  box-shadow: 0 4px 0 #c7758d;
}

.fra01-segmented.is-chocolate_bar .fra01-piece.is-left { opacity: 1; }

.fra01-segmented.is-chocolate_bar .fra01-piece.is-eaten,
.fra01-segmented.is-chocolate_bar .fra01-piece.is-used {
  background: #ead9cb;
  opacity: .72;
}

.fra01-segmented.is-chocolate_bar .fra01-piece.is-eaten::before,
.fra01-segmented.is-chocolate_bar .fra01-piece.is-eaten::after,
.fra01-segmented.is-chocolate_bar .fra01-piece.is-used::before,
.fra01-segmented.is-chocolate_bar .fra01-piece.is-used::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 48%;
  width: 2px;
  height: 76%;
  background: #7f513a;
  transform: rotate(34deg);
}

.fra01-segmented.is-chocolate_bar .fra01-piece.is-eaten::after,
.fra01-segmented.is-chocolate_bar .fra01-piece.is-used::after { transform: rotate(-34deg); }

.fra01-context-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
  color: var(--ink-muted, #536273);
  font-size: .84rem;
  font-weight: 750;
}

.fra01-context-legend span { display: inline-flex; align-items: center; gap: 7px; }
.fra01-context-legend i { width: 17px; height: 17px; border: 2px solid #5e3b28; border-radius: 4px; background: #985c34; }
.fra01-context-legend .legend-faded { position: relative; background: #ead9cb; }

.fra01-fraction {
  min-width: 54px;
  display: inline-grid;
  grid-template-rows: auto 3px auto;
  justify-items: center;
  align-items: center;
  color: #173752;
  font-size: clamp(1.28rem, 3.4vw, 2rem);
  font-weight: 900;
  line-height: 1;
}

.fra01-fraction i { width: 100%; min-width: 45px; height: 3px; background: currentColor; border-radius: 2px; }
.fra01-teach-fraction { opacity: 0; transform: translateY(8px); transition: opacity 300ms ease, transform 300ms ease; }
.cue-reveal_fraction .fra01-teach-fraction { opacity: 1; transform: translateY(0); }

.fra01-cake {
  width: clamp(170px, 30vw, 244px);
  filter: drop-shadow(0 10px 10px rgba(78, 48, 22, .18));
}

.fra01-cake-shadow { fill: #805632; opacity: .32; }
.fra01-cake-slice { fill: #f3ce8d; stroke: #a76b35; stroke-width: 1.7; }
.fra01-cake-slice.is-selected {
  fill: #4e97d2;
  stroke: #23659a;
  stroke-width: 2.4;
  stroke-dasharray: 4 2;
}
.fra01-cake-crust { fill: none; stroke: #986131; stroke-width: 5; }
.fra01-cake.is-unequal .fra01-cake-slice { stroke: #be5d39; }

.fra01-token-boundary {
  width: min(100%, 560px);
  padding: 20px;
  border: 3px solid transparent;
  border-radius: 24px;
  transition: border-color 360ms ease, background 360ms ease;
}
.fra01-token-boundary.has-boundary { border-color: #71879b; border-style: dashed; background: rgba(237, 244, 249, .64); }
.fra01-token-set { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); justify-items: center; gap: 16px 18px; }
.fra01-token-boundary.is-staggered .fra01-token-set { grid-template-columns: repeat(5, minmax(44px, 1fr)); }
.fra01-token {
  width: 51px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 4px solid #9aa9b7;
  border-radius: 50%;
  background: #e8eff5;
  box-shadow: 0 4px 0 #c7d1da;
  transition: transform 320ms ease, background 320ms ease, border-color 320ms ease;
}
.fra01-token i { width: 64%; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; opacity: .5; }
.fra01-token.is-selected { color: #8e601a; border-color: #95661e; background: repeating-linear-gradient(135deg, #ffd36f 0 7px, #ffc75b 7px 14px); box-shadow: 0 4px 0 #7e571d; }

.fra01-choice-canvas { min-height: 170px; }
.fra01-choice-cue { padding: 13px 18px; border: 1px solid #c8d8e5; border-radius: 999px; background: #f2f7fb; color: #39556d; font-weight: 780; }
.model-choice-answer .choice-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: stretch; }
.model-choice-card { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 15px; }
.fra01-option-visual { width: 100%; display: grid; place-items: center; pointer-events: none; }
.fra01-option-visual .fra01-cake { width: 150px; }
.fra01-option-visual .fra01-segmented { width: min(100%, 260px); min-height: 64px; border-width: 3px; }
.fra01-option-label { font-weight: 900; color: #173752; }

.fra01-worked-result {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 13px 18px;
  border: 1px solid #b8d8c6;
  border-radius: 16px;
  background: #eff9f3;
  color: #244b38;
  font-weight: 780;
}
.fra01-worked-result strong { font-size: 1.16rem; }

.worked-steps {
  display: grid;
  gap: 9px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.worked-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  opacity: 0;
  transform: translateY(5px);
  animation: worked-step-reveal 260ms ease forwards;
  animation-delay: calc(var(--worked-step-index, 0) * 420ms);
}

.worked-step-label {
  color: #315d48;
  white-space: nowrap;
}

@keyframes worked-step-reveal {
  to { opacity: 1; transform: translateY(0); }
}

.fra01-hook { position: relative; min-height: 230px; }
.hook-bar {
  grid-area: 1 / 1;
  width: min(100%, 650px);
  height: 104px;
  display: grid;
  overflow: hidden;
  border: 5px solid #5e3b28;
  border-radius: 16px;
  background: #995c35;
  box-shadow: 0 10px 22px rgba(68, 39, 23, .16);
  transition: opacity 420ms ease, transform 650ms cubic-bezier(.2,.78,.2,1);
}
.hook-bar span { background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 35%), #a96c40; }
.hook-bar span + span { border-left: 4px solid #f7e9da; }
.hook-bar-unequal { grid-template-columns: 29% 71%; }
.hook-bar-equal { grid-template-columns: 1fr 1fr; opacity: 0; transform: scaleX(.94); }
.hook-piece-labels { width: min(100%, 650px); display: grid; grid-template-columns: 29% 71%; color: #5d6770; font-size: .8rem; font-weight: 760; text-align: center; }
.hook-half-label { position: absolute; bottom: 2px; opacity: 0; transform: translateY(8px); transition: opacity 300ms ease, transform 300ms ease; }
.cue-fix_split .hook-bar-unequal { transform: scaleX(.95); }
.cue-equal_halves .hook-bar-unequal { opacity: 0; }
.cue-equal_halves .hook-bar-equal { opacity: 1; transform: scaleX(1); }
.cue-equal_halves .hook-piece-labels { opacity: 0; }
.cue-reveal_fraction .hook-half-label { opacity: 1; transform: translateY(0); }

.variant-teach_whole .fra01-segmented .fra01-piece:not(:last-child),
.variant-teach_several .fra01-segmented .fra01-piece:not(:last-child) { border-right-color: transparent; }
.cue-partition_four .variant-teach_whole .fra01-piece:not(:last-child),
.cue-partition_five .variant-teach_several .fra01-piece:not(:last-child) { border-right-color: rgba(76,43,25,.72); }
.variant-teach_whole .fra01-piece.is-selected { background: #a96c40; transform: translateY(0); }
.cue-reveal_fraction .variant-teach_whole .fra01-piece.is-selected { background: #dfaa58; transform: translateY(-5px); }
.variant-teach_several .fra01-piece.is-selected::after { opacity: 0; transform: translateY(9px); transition: opacity 280ms ease, transform 280ms ease; }
.cue-ice_one .variant-teach_several .fra01-piece:nth-child(1)::after,
.cue-ice_two .variant-teach_several .fra01-piece:nth-child(-n+2)::after,
.cue-ice_three .variant-teach_several .fra01-piece:nth-child(-n+3)::after { opacity: 1; transform: translateY(0); }
.variant-teach_set .fra01-token-boundary { border-color: transparent; background: transparent; }
.cue-show_boundary .variant-teach_set .fra01-token-boundary { border-color: #71879b; background: rgba(237,244,249,.64); }
.variant-teach_set .fra01-token.is-selected { color: inherit; border-color: #9aa9b7; background: #e8eff5; box-shadow: 0 4px 0 #c7d1da; }
.cue-highlight_three .variant-teach_set .fra01-token.is-selected { color: #8e601a; border-color: #95661e; background: repeating-linear-gradient(135deg, #ffd36f 0 7px, #ffc75b 7px 14px); box-shadow: 0 4px 0 #7e571d; }

.fra01-handoff { width: min(100%, 820px); display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 10px; }
.handoff-step { min-height: 112px; display: grid; align-content: center; gap: 7px; padding: 15px; border: 2px solid #ccdae5; border-radius: 17px; background: #f6f9fb; opacity: .45; transform: translateY(5px); transition: opacity 300ms ease, transform 300ms ease, border-color 300ms ease; }
.handoff-step b { color: #173752; }
.handoff-step small { color: #657789; }
.fra01-handoff > i { align-self: center; color: #8ba0b1; font-style: normal; font-weight: 900; }
.cue-handoff_whole .handoff-whole,
.cue-handoff_equal .handoff-whole,
.cue-handoff_equal .handoff-equal,
.cue-handoff_target .handoff-step { opacity: 1; transform: translateY(0); border-color: #5f9ccb; }

.fra01-equal-repair { grid-template-columns: 1fr auto 1fr; }
.repair-strip { width: min(100%, 310px); display: grid; grid-template-columns: 22% 78%; grid-template-rows: 80px auto; }
.repair-strip span { border: 3px solid #6d4428; background: #9d6038; }
.repair-strip span:first-child { border-radius: 10px 0 0 10px; }
.repair-strip span:nth-child(2) { border-radius: 0 10px 10px 0; border-left: 0; }
.repair-strip small { padding: 6px; color: #657789; text-align: center; }
.repair-strip-equal { grid-template-columns: 1fr 1fr; }
.repair-arrow { color: #327eb8; font-size: 1.7rem; font-weight: 900; }

.optional-hint { display: grid; justify-items: start; gap: 10px; }
.hint-toggle { min-height: 46px; padding: 10px 15px; border: 2px solid #77a8cb; border-radius: 12px; background: #f2f8fc; color: #1e5e8e; font: inherit; font-weight: 840; cursor: pointer; }
.hint-toggle:hover,
.hint-toggle:focus-visible { background: #e6f2fa; outline: 3px solid rgba(39,120,184,.2); outline-offset: 2px; }
.hint-content { max-width: 680px; padding: 14px 17px; border-left: 4px solid #d6a93f; border-radius: 8px 14px 14px 8px; background: #fff8e6; color: #504528; }
.hint-content p { margin: 5px 0 0; }

.guided-fraction-builder { width: 100%; }
.guided-builder-steps { display: grid; grid-template-columns: 1fr auto 1fr auto minmax(76px, auto); align-items: center; gap: 13px; }
.guided-builder-steps label { min-height: 112px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; padding: 14px; border: 1px solid #c9d9e5; border-radius: 15px; background: #f7fafc; }
.guided-builder-steps label b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #2f7fba; color: white; }
.guided-builder-steps label span { color: #324e64; font-size: .86rem; font-weight: 780; }
.guided-builder-steps input { grid-column: 1 / -1; width: 84px; height: 54px; justify-self: center; border: 2px solid #8aaac1; border-radius: 10px; text-align: center; font: inherit; font-size: 1.25rem; font-weight: 850; }
.guided-built-fraction { min-width: 70px; display: grid; grid-template-rows: 1fr 3px 1fr; justify-items: center; gap: 4px; padding: 10px; color: #173752; font-size: 1.35rem; font-weight: 900; }
.guided-built-fraction i { width: 42px; height: 3px; background: currentColor; }

@media (max-width: 760px) {
  .fra01-segmented { min-height: 84px; }
  .fra01-token-set { grid-template-columns: repeat(4, minmax(38px, 1fr)); gap: 12px; }
  .fra01-token { width: 43px; }
  .fra01-handoff { grid-template-columns: 1fr; }
  .fra01-handoff > i { transform: rotate(90deg); justify-self: center; }
  .handoff-step { min-height: 76px; }
  .guided-builder-steps { grid-template-columns: 1fr; }
  .guided-builder-steps > i { transform: rotate(90deg); justify-self: center; }
  .fra01-equal-repair { grid-template-columns: 1fr; }
  .repair-arrow { transform: rotate(90deg); }
  .model-choice-card { min-height: 180px; }
}

@media (max-width: 470px) {
  .fra01-context-visual { min-height: 230px; }
  .fra01-teach-context,
  .fra01-question-context,
  .fra01-hook { min-height: 210px; }
  .fra01-whole-outline { padding: 8px; }
  .fra01-segmented { min-height: 70px; border-width: 3px; }
  .hook-bar { height: 80px; border-width: 3px; }
  .fra01-option-visual .fra01-cake { width: 126px; }
  .fra01-token-boundary { padding: 13px; }
  .fra01-token-set { grid-template-columns: repeat(4, 1fr); gap: 9px; }
  .fra01-token { width: 36px; border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .fra01-piece,
  .fra01-token,
  .hook-bar,
  .hook-half-label,
  .handoff-step,
  .fra01-teach-fraction { transition-duration: 1ms !important; }
}

@media (forced-colors: active) {
  .fra01-piece.is-selected,
  .fra01-token.is-selected,
  .fra01-cake-slice.is-selected { forced-color-adjust: none; background: Highlight; fill: Highlight; color: HighlightText; }
}

/* FRA-01 re-audit: preserve context, exact part sizes, speech-led repairs and flow captions. */
.teaching-surface:has(.fra01-context-visual) { padding-bottom: 0; }
.progressive-caption-lesson .math-canvas:has(.fra01-context-visual) { min-height: 0; padding: 24px; }
.teaching-surface:has(.fra01-context-visual) > .canvas-caption-layer:not([hidden]) {
  position: relative; inset: auto; display: grid; justify-items: center; gap: 8px; padding: 0 24px 12px;
}
.teaching-surface:has(.fra01-context-visual) .canvas-caption { position: static; max-width: 100%; }
.teaching-surface:has(.fra01-context-visual) .canvas-caption:empty,
.teaching-surface:has(.fra01-context-visual) .is-complete .canvas-caption { display: none; }
.teaching-surface:has(.fra01-context-visual) .canvas-narration-controls { position: static; justify-self: end; }
.math-canvas:has(.fra01-choice-canvas) { padding-block: 0 !important; }
.fra01-context-visual:has(.fra01-choice-canvas), .fra01-choice-canvas { min-height: 0; }
.fra01-choice-cue { display: none; }
.fra01-context-visual .fra01-teach-fraction, .fra01-context-visual .hook-half-label { visibility: hidden; }
.cue-reveal_fraction .fra01-context-visual :is(.fra01-teach-fraction, .hook-half-label) { visibility: visible; }
.fra01-context-visual .hook-bar-equal { visibility: hidden; }
.cue-equal_halves .fra01-context-visual .hook-bar-equal { visibility: visible; }
.cue-equal_halves .fra01-context-visual :is(.hook-bar-unequal, .hook-piece-labels) { visibility: hidden; }
.fra01-context-visual .fra01-equal-repair { grid-template-columns: 1fr; gap: 12px; }
.fra01-context-visual .repair-arrow { transform: rotate(90deg); }
.fra01-context-visual .repair-strip-equal { grid-template-columns: 22% 78%; transition: grid-template-columns 550ms ease; }
.fra01-context-visual .repair-strip-equal small { visibility: hidden; }
.cue-repair_equal_cut .fra01-context-visual .repair-strip-equal { grid-template-columns: 1fr 1fr; }
.cue-repair_equal_labels .fra01-context-visual .repair-strip-equal small { visibility: visible; }
.fra01-context-visual .hint-focus-whole .fra01-whole-outline { border-color: #2778b8; }
.fra01-context-visual .hint-focus-selected .fra01-cake-slice.is-selected { stroke: #855b19; stroke-width: 4px; }
.lesson-card:has(.fra01-context-visual .hint-focus-whole) .guided-builder-steps label:nth-of-type(2) input,
.lesson-card:has(.fra01-context-visual .hint-focus-selected) .guided-builder-steps label:nth-of-type(1) input { border-color: #8aaac1; }
.lesson-card:has(.fra01-context-visual) .fra01-segmented:not(.is-unequal) .fra01-piece { flex-basis: calc(100% / var(--fra01-parts)); }
.lesson-card:has(.fra01-context-visual) .fra01-segmented.is-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px;
  border: 2px dashed #71879b; background: transparent; border-radius: 12px; box-shadow: none; min-height: 0; max-width: 360px;
}
.lesson-card:has(.fra01-context-visual) .is-tiles .fra01-piece {
  aspect-ratio: 1; border: 2px solid #6b8393; border-radius: 5px; background: #e4edf1;
}
.lesson-card:has(.fra01-context-visual) .is-tiles .fra01-piece.is-selected {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.3) 0 5px, transparent 5px 11px), #3888c8;
}
@media (prefers-reduced-motion: reduce) {
  .fra01-context-visual .repair-strip-equal { transition: none; }
}

/* FRA-02 canonical lesson -------------------------------------------------- */
.question-detail {
  max-width: 720px;
  margin: 12px auto 0;
  color: var(--ink-muted, #526574);
  font-size: clamp(1rem, 2.2vw, 1.16rem);
  line-height: 1.55;
}

.fixed-fraction-answer {
  width: min(100%, 420px);
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.fixed-fraction-answer legend {
  width: 100%;
  margin-bottom: 9px;
  color: var(--ink-muted, #536273);
  font-weight: 780;
  text-align: center;
}

.fixed-fraction-builder {
  min-width: 108px;
  display: grid;
  grid-template-rows: 64px 4px 64px;
  justify-items: stretch;
  align-items: center;
  gap: 7px;
  padding: 14px 17px;
  border: 2px solid #b8cbd8;
  border-radius: 18px;
  background: #f7fbfd;
  color: #183a55;
  box-shadow: 0 7px 18px rgba(35, 67, 87, .09);
}

.fixed-fraction-builder input,
.fixed-fraction-value {
  width: 72px;
  height: 60px;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 2px solid #7ca6c2;
  border-radius: 12px;
  background: white;
  color: #173752;
  font: inherit;
  font-size: 1.45rem;
  font-weight: 900;
  text-align: center;
}

.fixed-fraction-value {
  border-style: dashed;
  background: repeating-linear-gradient(135deg, #eef5f8 0 8px, #e4eef3 8px 16px);
}

.fixed-fraction-builder i { width: 100%; height: 4px; border-radius: 3px; background: currentColor; }
.fixed-fraction-answer > p { margin: 0; color: var(--ink-muted, #536273); font-size: .85rem; }

.fra02-context-visual {
  width: 100%;
  min-height: clamp(250px, 38vw, 420px);
  display: grid;
  place-items: center;
}

.fra02-teach-model,
.fra02-question-model,
.fra02-role-diagram,
.fra02-hook,
.fra02-multi-whole,
.fra02-field-repair,
.fra02-target-repair {
  width: min(100%, 800px);
  display: grid;
  place-items: center;
  gap: clamp(16px, 3vw, 28px);
}

.fra02-question-object,
.fra02-role-object,
.fra02-hook-seats,
.fra02-symbol-question { width: 100%; display: grid; place-items: center; gap: 20px; }

.fra02-fraction {
  min-width: 78px;
  display: inline-grid;
  grid-template-rows: auto 4px auto;
  justify-items: center;
  align-items: center;
  gap: 5px;
  color: #163b5a;
  font-size: clamp(1.75rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
}

.fra02-fraction i { width: 100%; min-width: 62px; height: 4px; border-radius: 4px; background: currentColor; }
.fra02-fraction.is-compact { min-width: 56px; font-size: 1.45rem; }

.fra02-partition {
  width: min(100%, 670px);
  min-height: clamp(88px, 15vw, 134px);
  display: grid;
  grid-template-columns: repeat(var(--fra02-parts), minmax(9px, 1fr));
  overflow: hidden;
  border: 4px solid #31566f;
  border-radius: 16px;
  background: #f5f8fa;
  box-shadow: 0 11px 23px rgba(35, 65, 86, .12);
}

.fra02-cell { position: relative; min-width: 0; background: #eef3f6; }
.fra02-cell + .fra02-cell { border-left: 2px solid #527187; }
.fra02-cell.is-selected {
  background: repeating-linear-gradient(135deg, #f4b956 0 10px, #ffd276 10px 20px);
}
.fra02-cell.is-selected::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid #855b19;
  border-radius: 7px;
}
.fra02-partition.is-chocolate .fra02-cell { background: #9b613d; }
.fra02-partition.is-chocolate .fra02-cell.is-selected { background: repeating-linear-gradient(135deg, #66a6cf 0 9px, #8cc3e2 9px 18px); }
.fra02-partition.is-sixths { min-height: 70px; }

.fra02-seat-boundary,
.fra02-token-boundary {
  width: min(100%, 650px);
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 3px dashed #7892a6;
  border-radius: 23px;
  background: rgba(239, 246, 250, .78);
}
.fra02-seats { display: grid; grid-template-columns: repeat(var(--seat-columns), minmax(44px, 1fr)); gap: 13px; }
.fra02-seat {
  position: relative;
  min-height: 58px;
  display: grid;
  place-items: center;
  border: 3px solid #7d8c98;
  border-radius: 10px 10px 17px 17px;
  background: #e5ebef;
  box-shadow: inset 0 -8px #cbd5dc;
}
.fra02-seat::after { content: ""; position: absolute; width: 70%; height: 10px; bottom: -8px; border-radius: 0 0 9px 9px; background: #7d8c98; }
.fra02-seat.is-booked { border-color: #246a85; background: repeating-linear-gradient(135deg, #68b4cf 0 8px, #8ccadf 8px 16px); box-shadow: inset 0 -8px #4190ad; }
.fra02-seat b { color: #163b50; font-size: 1.2rem; }
.fra02-seat-boundary small,
.fra02-token-boundary small { color: #536c7e; font-weight: 760; text-align: center; }

.fra02-tokens { display: grid; grid-template-columns: repeat(var(--token-columns), minmax(44px, 1fr)); justify-items: center; gap: 14px; }
.fra02-token {
  width: 52px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 4px solid #8d9dac;
  border-radius: 50%;
  background: #e7eef3;
  box-shadow: 0 4px 0 #c4d0d9;
}
.fra02-token i { width: 58%; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; opacity: .45; }
.fra02-token.is-selected { color: #6c4b13; border-color: #8a611d; background: repeating-linear-gradient(45deg, #ffd46f 0 7px, #f5b94d 7px 14px); box-shadow: 0 4px 0 #80591a; }

.fra02-cake { width: clamp(180px, 32vw, 270px); filter: drop-shadow(0 10px 11px rgba(77, 54, 24, .17)); }
.fra02-cake-slice { fill: #f3d497; stroke: #98652d; stroke-width: 1.6; }
.fra02-cake-slice.is-selected { fill: #6cafce; stroke: #225e7d; stroke-width: 2.4; stroke-dasharray: 4 2; }
.fra02-cake-outline { fill: none; stroke: #8c5c29; stroke-width: 4; }

.fra02-role-diagram { grid-template-columns: minmax(230px, 1fr) auto; }
.fra02-role-labels { grid-column: 1 / -1; width: min(100%, 660px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fra02-role {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 2px solid #8aacc2;
  border-radius: 14px;
  background: #f4f9fc;
  color: #294b63;
  text-align: center;
}
.fra02-role b { letter-spacing: .08em; }
.fra02-role small { color: #596f7f; }
.fra02-role.numerator-role { border-top: 6px solid #d8952e; }
.fra02-role.denominator-role { border-top: 6px double #397fa7; }

.fra02-hook { grid-template-columns: 1fr; }
.fra02-hook-fractions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px; }
.fra02-hook-fractions > span { display: grid; justify-items: center; gap: 8px; padding: 14px 19px; border-radius: 17px; }
.fra02-hook-fractions small { color: #536c7e; font-weight: 760; }
.fra02-hook-fractions .correct-description { border: 2px solid #4c9870; background: #eff8f3; }
.fra02-hook-fractions .wrong-description { border: 2px dashed #b45e53; background: repeating-linear-gradient(135deg, #fff2f0 0 8px, #fbe6e2 8px 16px); }
.swap-arrow { color: #8c6670; font-size: 1.8rem; font-weight: 900; }

.fra02-hook .swap-arrow,
.fra02-hook .wrong-description,
.fra02-role-labels .fra02-role,
.fra02-multi-role {
  opacity: .18;
  transform: translateY(5px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.fra02-hook .fra02-seat.is-booked,
.fra02-hook .correct-description { opacity: 1; transform: translateY(0); }
.cue-book_five .fra02-hook .fra02-seat.is-booked,
.cue-show_five_twelfths .fra02-hook .fra02-seat.is-booked,
.cue-swap_numbers .fra02-hook .fra02-seat.is-booked,
.cue-mark_mismatch .fra02-hook .fra02-seat.is-booked,
.cue-show_five_twelfths .fra02-hook .correct-description,
.cue-swap_numbers .fra02-hook .correct-description,
.cue-mark_mismatch .fra02-hook .correct-description,
.cue-swap_numbers .fra02-hook .swap-arrow,
.cue-swap_numbers .fra02-hook .wrong-description,
.cue-mark_mismatch .fra02-hook .swap-arrow,
.cue-mark_mismatch .fra02-hook .wrong-description,
.cue-focus_numerator .fra02-role-labels .numerator-role,
.cue-pulse_selected .fra02-role-labels .numerator-role,
.cue-show_numerator .fra02-role-labels .numerator-role,
.cue-focus_denominator .fra02-role-labels .denominator-role,
.cue-show_denominator .fra02-role-labels .denominator-role,
.cue-map_numerator .fra02-role-labels .numerator-role,
.cue-map_denominator .fra02-role-labels .denominator-role,
.cue-show_both_roles .fra02-role-labels .fra02-role,
.cue-show_eleven_sixths .fra02-multi-role,
.cue-map_numerator .fra02-multi-role,
.cue-map_denominator .fra02-multi-role {
  opacity: 1;
  transform: translateY(0);
}
.cue-pulse_selected .fra02-seat.is-booked,
.cue-focus_whole .fra02-seat-boundary,
.cue-focus_denominator .fra02-denominator,
.cue-focus_numerator .fra02-numerator { outline: 4px solid rgba(42, 126, 173, .35); outline-offset: 4px; }
.cue-mark_mismatch .fra02-hook .wrong-description { color: #8b3028; box-shadow: 0 0 0 4px rgba(180, 94, 83, .16); }

.fra02-handoff { width: min(100%, 850px); display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.fra02-handoff span { min-height: 90px; display: grid; place-items: center; padding: 14px; border: 2px solid #a9c3d3; border-radius: 16px; background: #f4f8fb; color: #284d65; text-align: center; }
.fra02-handoff i { color: #6d889a; font-style: normal; font-size: 1.35rem; font-weight: 900; }

.fra02-multi-whole { justify-items: stretch; }
.fra02-multi-whole > small { color: #536c7e; font-weight: 800; text-align: center; }
.fra02-whole-stack { display: grid; gap: 13px; }
.fra02-whole-row { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; }
.fra02-whole-row > span { color: #536c7e; font-size: .82rem; font-weight: 800; text-align: right; }
.fra02-multi-role { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 22px; }
.fra02-multi-role .fra02-role-labels { max-width: 510px; }

.fra02-worked { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 13px 18px; border: 2px solid #9fc9b0; border-radius: 16px; background: #eff9f3; color: #315844; }
.fra02-worked b { min-width: 42px; display: grid; place-items: center; padding: 7px; border: 2px solid currentColor; border-radius: 10px; font-size: 1.25rem; }
.fra02-worked i { font-style: normal; font-weight: 800; }

.fra02-field-repair { grid-template-columns: 1fr auto; }
.fra02-static-builder { display: grid; grid-template-rows: 52px 3px 52px auto; justify-items: center; gap: 6px; color: #173752; font-size: 1.4rem; font-weight: 900; }
.fra02-static-builder > span,
.fra02-static-builder > b { width: 60px; height: 50px; display: grid; place-items: center; border: 2px solid #759db8; border-radius: 10px; }
.fra02-static-builder > b { border-style: dashed; background: repeating-linear-gradient(135deg, #eef5f8 0 7px, #e1edf3 7px 14px); }
.fra02-static-builder > i { width: 62px; height: 3px; background: currentColor; }
.fra02-static-builder small { color: #536c7e; font-size: .76rem; }

@media (max-width: 760px) {
  .fra02-role-diagram,
  .fra02-field-repair { grid-template-columns: 1fr; }
  .fra02-handoff { grid-template-columns: 1fr; }
  .fra02-handoff i { transform: rotate(90deg); justify-self: center; }
  .fra02-whole-row { grid-template-columns: 1fr; }
  .fra02-whole-row > span { text-align: center; }
}

@media (max-width: 470px) {
  .fra02-context-visual { min-height: 230px; }
  .fra02-seat-boundary,
  .fra02-token-boundary { padding: 13px; }
  .fra02-seats { grid-template-columns: repeat(4, minmax(38px, 1fr)); gap: 9px; }
  .fra02-seat { min-height: 47px; border-width: 2px; }
  .fra02-tokens { grid-template-columns: repeat(4, 1fr); gap: 9px; }
  .fra02-token { width: 38px; border-width: 3px; }
  .fra02-partition { min-height: 76px; border-width: 3px; }
  .fra02-cell + .fra02-cell { border-left-width: 1px; }
  .fra02-cell.is-selected::after { inset: 5px 3px; border-width: 1px; }
  .fra02-role-labels { grid-template-columns: 1fr; }
  .fra02-hook-fractions { gap: 10px; }
  .fra02-hook-fractions > span { padding: 10px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .fra02-cell,
  .fra02-seat,
  .fra02-token,
  .fra02-role,
  .fra02-hook-fractions > span { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

@media (forced-colors: active) {
  .fra02-cell.is-selected,
  .fra02-seat.is-booked,
  .fra02-token.is-selected,
  .fra02-cake-slice.is-selected { forced-color-adjust: none; background: Highlight; fill: Highlight; color: HighlightText; }
}

/* FRA-04 canonical comparison model */
/* FRA-02 refinement: captions occupy space only while present; controls stay usable. */
.teaching-surface:has(.fra02-context-visual) { padding-bottom: 0; }
.progressive-caption-lesson .math-canvas:has(.fra02-context-visual) {
  min-height: 0;
  padding: 24px;
}
.teaching-surface:has(.fra02-context-visual) > .canvas-caption-layer:not([hidden]) {
  position: relative;
  inset: auto;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 24px 12px;
}
.teaching-surface:has(.fra02-context-visual) .canvas-caption {
  position: static;
  max-width: 100%;
}
.teaching-surface:has(.fra02-context-visual) .canvas-caption:empty,
.teaching-surface:has(.fra02-context-visual) .is-complete .canvas-caption { display: none; }
.teaching-surface:has(.fra02-context-visual) .canvas-narration-controls {
  position: static;
  justify-self: end;
}
.fra02-field-repair { grid-template-columns: 1fr; }

/* A label is not named until its authored speech cue. Faint text is still a reveal. */
.fra02-hook .wrong-description,
.fra02-hook .swap-arrow,
.fra02-role-labels .fra02-role,
.fra02-multi-role {
  opacity: 0;
  visibility: hidden;
}
.cue-swap_numbers .fra02-hook :is(.wrong-description, .swap-arrow),
.cue-mark_mismatch .fra02-hook :is(.wrong-description, .swap-arrow),
.cue-show_numerator .variant-numerator .numerator-role,
.cue-show_denominator .variant-denominator .denominator-role,
.cue-show_both_roles .variant-both_roles .fra02-role,
.cue-show_eleven_sixths .fra02-multi-role,
.cue-map_numerator .fra02-multi-role,
.cue-map_denominator .fra02-multi-role,
.cue-map_numerator .fra02-multi-role .numerator-role,
.cue-map_denominator .fra02-multi-role .denominator-role,
.fra02-role-diagram:is(.is-revealed, .variant-repair_swap, .variant-repair_denominator) .fra02-role {
  opacity: 1;
  visibility: visible;
}
.variant-both_roles .fra02-role-fraction { visibility: hidden; }
:is(.cue-map_numerator, .cue-map_denominator, .cue-show_both_roles) .variant-both_roles .fra02-role-fraction { visibility: visible; }
.cue-map_numerator .fra02-context-visual .fra02-cell.is-selected { outline: 3px solid #855b19; outline-offset: -4px; }
.cue-map_numerator .fra02-context-visual .fra02-numerator { outline: 3px solid #855b19; outline-offset: 4px; }
.cue-map_denominator .fra02-context-visual .fra02-partition,
.cue-map_denominator .fra02-context-visual .fra02-denominator,
.fra02-question-model.hint-focus-whole .fra02-partition,
.fra02-context-visual:has(.fra02-question-model) .has-whole-focus { outline: 3px solid #397fa7; outline-offset: 4px; }
.fra02-question-model.hint-focus-selected .fra02-cell.is-selected { outline: 3px solid #855b19; outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
  .fra02-multi-role, .fra02-role-fraction, .fra02-role-labels .fra02-role { transition: none; transform: none; }
}

.fra04-context-visual {
  width: min(100%, 900px);
  min-height: 300px;
  display: grid;
  place-items: center;
}

.fra04-comparison {
  width: min(100%, 820px);
  display: grid;
  justify-items: stretch;
  gap: 14px;
  color: #273f4f;
}

.fra04-whole-note,
.fra04-symbolic-note {
  margin: 0;
  color: #5e7180;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
}

.fra04-structure-label,
.fra04-locked-note {
  justify-self: center;
  padding: 6px 12px;
  border: 1px solid #98b9ba;
  border-radius: 999px;
  background: #eff7f5;
  color: #356365;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fra04-pair {
  width: 100%;
  display: grid;
  gap: 9px;
  align-items: center;
}

.fra04-row {
  width: 100%;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.fra04-value {
  display: grid;
  place-items: center;
}

.fra04-fraction {
  width: 54px;
  display: inline-grid;
  grid-template-rows: auto 3px auto;
  place-items: center;
  gap: 3px;
  color: #173752;
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1;
}

.fra04-fraction > i {
  width: 100%;
  height: 3px;
  background: currentColor;
}

.fra04-bar {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: repeat(var(--parts), minmax(0, 1fr));
  overflow: hidden;
  border: 3px solid #5b6d78;
  border-radius: 13px;
  background: #fffaf0;
  box-shadow: 0 9px 20px rgba(42, 63, 74, .09);
}

.fra04-piece {
  position: relative;
  display: block;
  min-width: 0;
  background: #fff7e6;
}

.fra04-piece + .fra04-piece { border-left: 2px solid #5b6d78; }
.fra04-piece.selected { background: #b96f3f; }
.fra04-piece.selected > b {
  position: absolute;
  inset: 7px 4px;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 5px, rgba(78,43,25,.08) 5px 10px);
}

.fra04-bar.chocolate {
  min-height: 84px;
  border-color: #5e3b28;
  background: #ead9cb;
  box-shadow: 0 10px 22px rgba(94, 59, 40, .18);
}
.fra04-bar.chocolate .fra04-piece { background: #d9b89f; }
.fra04-bar.chocolate .fra04-piece.selected { background: #8f542f; }
.fra04-bar.chocolate .fra04-piece + .fra04-piece { border-left-color: #5e3b28; }

.fra04-no-bar {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #c9d6dd 18%, #c9d6dd 82%, transparent);
}

.fra04-symbol-wrap {
  min-height: 46px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.fra04-symbol {
  min-width: 58px;
  display: grid;
  place-items: center;
  color: #0b6570;
  font-size: 2.05rem;
  line-height: 1;
}

.fra04-open-label,
.fra04-point-label {
  color: #536c7e;
  font-size: .76rem;
  font-weight: 900;
}
.fra04-open-label { text-align: right; }
.fra04-point-label { text-align: left; }

.fra04-reverse {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 11px 18px;
  border: 2px dashed #9db6c5;
  border-radius: 16px;
  background: #f5f9fb;
}
.fra04-reverse > b { color: #0b6570; font-size: 1.7rem; }

.fra04-summary {
  width: min(100%, 840px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.fra04-summary > div {
  min-height: 148px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  padding: 18px;
  border: 2px solid #a8c2cc;
  border-radius: 19px;
  background: #f5fafb;
  text-align: center;
}
.fra04-summary strong { color: #0b6570; }
.fra04-summary span { color: #596f7d; font-size: .85rem; }
.fra04-summary b { color: #173752; font-size: 1.04rem; }

.feedback-correct .fra04-symbol,
.feedback-worked .fra04-symbol { color: #28754f; }
.feedback-hint .fra04-bar,
.feedback-support .fra04-bar { box-shadow: 0 0 0 5px rgba(11, 101, 112, .14); }

.cue-focus_selected_count .fra04-piece.selected,
.cue-focus_piece_width .fra04-piece:first-child,
.cue-focus_left_piece .fra04-left .fra04-piece:first-child,
.cue-align_equal_bars .fra04-bar { box-shadow: inset 0 0 0 4px rgba(11, 101, 112, .22); }
.cue-focus_left .fra04-left,
.cue-focus_right .fra04-right,
.cue-focus_denominators .fra04-fraction > span:last-child,
.cue-focus_numerators .fra04-fraction > span:first-child { outline: 4px solid rgba(11, 101, 112, .22); outline-offset: 4px; border-radius: 7px; }
.cue-focus_open_side .fra04-open-label,
.cue-focus_point .fra04-point-label { color: #0b6570; text-decoration: underline; text-decoration-thickness: 3px; }

@media (max-width: 760px) {
  .fra04-summary { grid-template-columns: 1fr; }
  .fra04-summary > div { min-height: 106px; }
}

@media (max-width: 470px) {
  .fra04-context-visual { min-height: 245px; }
  .fra04-comparison { gap: 9px; }
  .fra04-row { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; }
  .fra04-fraction { width: 43px; font-size: 1.05rem; }
  .fra04-bar { min-height: 55px; border-width: 2px; border-radius: 10px; }
  .fra04-bar.chocolate { min-height: 62px; }
  .fra04-piece + .fra04-piece { border-left-width: 1px; }
  .fra04-piece.selected > b { inset: 5px 2px; border-width: 1px; }
  .fra04-symbol-wrap { min-height: 36px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .fra04-symbol { min-width: 40px; font-size: 1.55rem; }
  .fra04-open-label,
  .fra04-point-label { font-size: .62rem; }
  .fra04-reverse { gap: 8px; padding: 8px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .fra04-piece,
  .fra04-row,
  .fra04-symbol { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

@media (forced-colors: active) {
  .fra04-piece.selected { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .fra04-bar,
  .fra04-summary > div { border-color: CanvasText; }
}

/* FRA-03 canonical lesson -------------------------------------------------- */
.fra03-context-visual {
  width: min(100%, 920px);
  min-height: 310px;
  display: grid;
  place-items: center;
}

.fra03-teaching-model,
.fra03-question-model,
.fra03-question-object,
.fra03-model-prompt {
  width: 100%;
  display: grid;
  place-items: center;
  gap: 24px;
}

.fra03-teaching-model { grid-template-columns: minmax(0, 1fr) auto; }

.fra03-game-transform {
  position: relative;
  width: 100%;
  min-height: 330px;
}

.fra03-game-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  opacity: 0;
  transform: scale(.96);
  pointer-events: none;
  transition: opacity .48s ease, transform .58s ease;
}

.fra03-game-layer > small,
.fra03-game-compare small,
.fra03-translation-source > small {
  color: #46626a;
  font: 850 .72rem/1 system-ui, sans-serif;
  letter-spacing: .12em;
}

.fra03-game-layer.layer-progress { opacity: 1; transform: scale(1); }
.fra03-game-layer > strong { display: flex; align-items: center; gap: 8px; color: #31525b; }
.fra03-game-layer.layer-compare { padding: 4px; }

.fra03-game-transform .layer-progress > strong {
  opacity: 0;
  visibility: hidden;
}

.cue-show_fraction .fra03-game-transform .layer-progress > strong {
  opacity: 1;
  visibility: visible;
}

.fra03-game-transform .layer-progress .fra03-area-part.is-selected {
  background: #fffdf8;
}

.fra03-game-transform .layer-progress .fra03-area-part.is-selected i {
  visibility: hidden;
}

.cue-fill_progress .fra03-game-transform .layer-progress .fra03-area-part.is-selected {
  background: #5d9fd1;
  animation: fra03-fill-tile .45s ease both;
  animation-delay: calc(var(--part-index) * 150ms);
}

.cue-fill_progress .fra03-game-transform .layer-progress .fra03-area-part.is-selected i {
  visibility: visible;
}

.cue-prepare_transform .fra03-game-transform .layer-progress { transform: scale(.92); }
.cue-show_progress .fra03-game-transform .layer-progress { opacity: 1; transform: scale(1); }
.cue-show_badges .fra03-game-transform .layer-progress { opacity: 0; transform: scale(.84); }
.cue-show_badges .fra03-game-transform .layer-badges { opacity: 1; transform: scale(1); }
.cue-show_route .fra03-game-transform .layer-progress,
.cue-show_route .fra03-game-transform .layer-badges { opacity: 0; transform: scale(.86); }
.cue-show_route .fra03-game-transform .layer-route { opacity: 1; transform: scale(1); }
.cue-show_comparison .fra03-game-transform .fra03-game-layer { opacity: 0; transform: scale(.94); }
.cue-show_comparison .fra03-game-transform .layer-compare { opacity: 1; transform: scale(1); }

.fra03-game-transform .layer-route .fra03-mark { left: 0; }
.cue-show_route .fra03-game-transform .layer-route .fra03-mark { left: var(--marked-position); transition: left 1.05s cubic-bezier(.2, .75, .2, 1); }

.fra03-game-compare {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.fra03-game-compare > div {
  min-width: 0;
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(36, 59, 69, .16);
  border-radius: 20px;
  background: rgba(255, 253, 248, .94);
}

.fra03-game-compare .fra03-area-model { min-width: 0; min-height: 70px; border-width: 3px; border-radius: 10px; }
.fra03-game-compare .fra03-set-boundary { padding: 12px; border-width: 2px; border-radius: 14px; }
.fra03-game-compare .fra03-token-grid { gap: 6px; }
.fra03-game-compare .fra03-token { min-width: 20px; border-width: 2px; }
.fra03-game-compare .fra03-number-line { padding: 31px 2px 0; }
.fra03-game-compare .fra03-number-line small,
.fra03-game-compare .fra03-set-boundary small { display: none; }
.fra03-game-compare > strong { grid-column: 1 / -1; justify-self: center; display: flex; gap: 8px; align-items: center; color: #0b6570; }

@keyframes fra03-fill-tile {
  from { transform: scaleY(.25); transform-origin: bottom; }
  to { transform: scaleY(1); transform-origin: bottom; }
}

.fra03-fraction {
  display: inline-grid;
  grid-template-rows: auto 3px auto;
  width: 72px;
  text-align: center;
  font: 800 1.65rem/1.05 var(--font-display, Georgia, serif);
  color: var(--ink, #17242b);
}

.fra03-fraction i {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.fra03-fraction.is-compact { width: 48px; font-size: 1.05rem; grid-template-rows: auto 2px auto; }

.fra03-area-model {
  width: min(100%, 590px);
  min-width: 230px;
  min-height: 118px;
  display: grid;
  grid-template-columns: repeat(var(--fra03-parts), minmax(12px, 1fr));
  overflow: hidden;
  border: 4px solid #243b45;
  border-radius: 15px;
  background: #fffdf8;
  box-shadow: 0 12px 32px rgba(31, 54, 64, .1);
}

.fra03-area-model.is-unequal { display: flex; }
.fra03-area-model.is-unequal .fra03-area-part { flex: var(--part-weight) 1 0; }
.fra03-area-model.is-progress-panel { border-radius: 11px; box-shadow: 0 15px 34px rgba(31, 54, 64, .12); }

.fra03-area-part {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  background: #fffdf8;
  transition: background .45s ease, transform .45s ease;
}

.fra03-area-part + .fra03-area-part { border-left: 2px solid #243b45; }
.fra03-area-part.is-selected { background: #5d9fd1; }
.fra03-area-part.is-selected i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid #143d5a;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: #143d5a;
  font: 800 .85rem/1 system-ui, sans-serif;
}

.fra03-set-boundary,
.fra03-grouped-boundary {
  width: min(100%, 610px);
  padding: 24px;
  border: 3px dashed #0b6570;
  border-radius: 24px;
  background: rgba(240, 251, 250, .72);
  box-shadow: 0 12px 30px rgba(11, 101, 112, .08);
}

.fra03-set-boundary.is-cropped {
  border-color: #a44a35;
  background: rgba(255, 239, 232, .72);
}

.fra03-set-boundary small,
.fra03-grouped-boundary small {
  display: block;
  margin-top: 14px;
  text-align: center;
  color: #31525b;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.fra03-token-grid {
  display: grid;
  grid-template-columns: repeat(var(--token-columns), minmax(38px, 1fr));
  gap: 13px;
}

.fra03-token {
  position: relative;
  aspect-ratio: 1;
  min-width: 34px;
  max-width: 66px;
  justify-self: center;
  width: 100%;
  display: grid;
  place-items: center;
  border: 3px solid #30505a;
  border-radius: 50%;
  background: #fff8e7;
  box-shadow: inset 0 -6px 0 rgba(48, 80, 90, .08);
}

.fra03-token i {
  width: 36%;
  height: 36%;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: .22;
}

.fra03-token b { position: absolute; color: #103c57; font: 900 1rem/1 system-ui, sans-serif; }
.fra03-token.is-selected { border-color: #174e71; background: #73b3df; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .5); }
.fra03-token.is-badge { border-radius: 17px 17px 22px 22px; transform: rotate(45deg); }
.fra03-token.is-badge > i,
.fra03-token.is-badge > b { transform: rotate(-45deg); }
.fra03-token.is-badge > i { opacity: .72; border: 0; width: auto; height: auto; font-weight: 850; }
.fra03-token.is-card { aspect-ratio: 4 / 3; max-width: 84px; border-radius: 11px; }
.fra03-token.is-card > i { width: auto; height: auto; border: 0; opacity: .72; font-weight: 850; }

.fra03-groups {
  display: grid;
  grid-template-columns: repeat(var(--group-columns), minmax(70px, 1fr));
  gap: 12px;
}

.fra03-equal-group {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(24px, 1fr));
  gap: 6px;
  padding: 10px;
  border: 2px solid #6d878d;
  border-radius: 15px;
  background: #fffdf8;
}

.fra03-equal-group .fra03-token { min-width: 22px; border-width: 2px; }
.fra03-equal-group.is-selected { border-color: #174e71; box-shadow: inset 0 0 0 3px rgba(93, 159, 209, .25); }
.fra03-equal-group > b { position: absolute; right: 5px; top: 4px; color: #174e71; }

.fra03-number-line {
  width: min(100%, 680px);
  padding: 34px 26px 12px;
}

.fra03-line-track {
  position: relative;
  height: 88px;
  margin: 0 18px;
  border-top: 5px solid #263e48;
}

.fra03-interval {
  position: absolute;
  left: var(--interval-start);
  top: -18px;
  width: var(--interval-width);
  height: 32px;
  border-radius: 9px;
  background: transparent;
  transition: background .35s ease;
}

.fra03-interval.is-travelled { background: rgba(93, 159, 209, .19); }

.fra03-tick {
  position: absolute;
  left: var(--tick-position);
  top: -16px;
  width: 3px;
  height: 34px;
  transform: translateX(-50%);
  background: #263e48;
}

.fra03-tick b { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); color: #263e48; font: 800 1rem/1 system-ui, sans-serif; }

.fra03-mark {
  position: absolute;
  left: var(--marked-position);
  top: -25px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border: 4px solid #fffdf8;
  border-radius: 50%;
  background: #126c99;
  box-shadow: 0 0 0 3px #126c99;
}

.fra03-mark i { position: absolute; left: 50%; top: 18px; width: 3px; height: 23px; transform: translateX(-50%); background: #126c99; }
.fra03-number-line small { display: block; margin-top: 8px; text-align: center; color: #3a5962; font-weight: 750; }
.fra03-interval > i { display: none; }
.fra03-number-line.is-route .fra03-interval > i { position: absolute; left: 50%; top: 38px; display: block; color: #557077; font: 750 .72rem/1 system-ui, sans-serif; }
.fra03-route-start,
.fra03-route-finish { position: absolute; top: 61px; color: #31525b; font: 800 .68rem/1 system-ui, sans-serif; letter-spacing: .08em; }
.fra03-route-start { left: 0; transform: translateX(-50%); }
.fra03-route-finish { right: 0; transform: translateX(50%); }
.fra03-route-you { position: absolute; left: var(--marked-position); top: -54px; transform: translateX(-50%); padding: 5px 9px; border-radius: 999px; background: #0b6570; color: white; font: 850 .68rem/1 system-ui, sans-serif; letter-spacing: .08em; }
.fra03-cross-item .fra03-route-you,
.fra03-game-compare .fra03-route-you { top: -34px; }

.fra03-cross-model {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 18px;
}

.fra03-cross-item {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(36, 59, 69, .16);
  border-radius: 20px;
  background: rgba(255, 253, 248, .92);
}

.fra03-cross-item > span { color: #46626a; font: 800 .72rem/1 system-ui, sans-serif; letter-spacing: .11em; }
.fra03-cross-item .fra03-area-model { min-width: 0; min-height: 68px; border-width: 3px; border-radius: 9px; }
.fra03-cross-item .fra03-set-boundary { padding: 13px; border-width: 2px; border-radius: 14px; }
.fra03-cross-item .fra03-token-grid { gap: 6px; }
.fra03-cross-item .fra03-token { min-width: 20px; border-width: 2px; }
.fra03-cross-item .fra03-set-boundary small,
.fra03-cross-item .fra03-number-line small { display: none; }
.fra03-cross-item .fra03-number-line { padding: 30px 0 0; }
.fra03-shared-fraction { grid-column: 1 / -1; justify-self: center; }
.fra03-cross-model.is-sequence .fra03-cross-item { display: none; }
.fra03-cross-model.is-sequence .model-1 { display: grid; grid-column: 1 / -1; width: min(100%, 620px); justify-self: center; }
.cue-show_set .fra03-cross-model.is-sequence .model-1 { display: none; }
.cue-show_set .fra03-cross-model.is-sequence .model-2 { display: grid; grid-column: 1 / -1; width: min(100%, 620px); justify-self: center; }
.cue-show_number_line .fra03-cross-model.is-sequence .model-1,
.cue-show_number_line .fra03-cross-model.is-sequence .model-2 { display: none; }
.cue-show_number_line .fra03-cross-model.is-sequence .model-3 { display: grid; grid-column: 1 / -1; width: min(100%, 680px); justify-self: center; }
.cue-show_all_models .fra03-cross-model.is-sequence .fra03-cross-item { display: grid; grid-column: auto; width: auto; }

.fra03-teaching-model:has(.is-teaching-progress) > .fra03-fraction,
.fra03-teaching-model:has(.is-teaching-badges) > .fra03-fraction,
.fra03-teaching-model:has(.fra03-number-line.is-route) > .fra03-fraction,
.fra03-cross-model.is-sequence > .fra03-shared-fraction {
  opacity: 0;
  visibility: hidden;
}

.cue-show_fraction .fra03-teaching-model > .fra03-fraction,
.cue-show_target_fraction .fra03-cross-model.is-sequence > .fra03-shared-fraction {
  opacity: 1;
  visibility: visible;
}

.fra03-model-prompt small { color: #49646d; font-weight: 750; }
.fra03-translation-source { width: min(100%, 610px); display: grid; place-items: center; gap: 10px; }
.fra03-translation-source .fra03-area-model { min-height: 92px; }
.fra03-option-model { width: 100%; min-height: 112px; display: grid; place-items: center; }
.fra03-option-model .fra03-area-model { min-width: 0; min-height: 72px; border-width: 3px; border-radius: 10px; }
.fra03-option-model .fra03-set-boundary,
.fra03-option-model .fra03-grouped-boundary { padding: 10px; border-width: 2px; border-radius: 12px; }
.fra03-option-model .fra03-token-grid,
.fra03-option-model .fra03-groups { gap: 5px; }
.fra03-option-model .fra03-token { min-width: 17px; border-width: 2px; }
.fra03-option-model .fra03-set-boundary small,
.fra03-option-model .fra03-grouped-boundary small,
.fra03-option-model .fra03-number-line small { display: none; }
.fra03-option-model .fra03-number-line { padding: 28px 2px 0; }
.fra03-option-model .fra03-line-track { height: 48px; margin: 0 7px; }

.multiple-choice-answer .choice-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.multi-choice-card {
  min-width: 0;
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px;
  border: 2px solid #b5c1c3;
  border-radius: 17px;
  background: #fffdf8;
  color: #1b313a;
  cursor: pointer;
}

.multi-choice-card:hover { border-color: #4f7f8b; transform: translateY(-1px); }
.multi-choice-card.is-selected { border-color: #0b6570; box-shadow: inset 0 0 0 3px rgba(11, 101, 112, .18); background: #eef9f8; }
.multi-choice-card:focus-visible,
.set-builder-token:focus-visible { outline: 4px solid #f0a340; outline-offset: 3px; }

.set-builder-answer { display: grid; gap: 12px; }
.set-builder-boundary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 14px;
  padding: 20px;
  border: 3px dashed #0b6570;
  border-radius: 22px;
  background: rgba(240, 251, 250, .72);
}

.set-builder-token {
  position: relative;
  width: 58px;
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  border: 3px solid #30505a;
  border-radius: 50%;
  background: #fff8e7;
  color: #103c57;
  cursor: pointer;
  box-shadow: inset 0 -6px 0 rgba(48, 80, 90, .08);
}

.set-builder-token i { width: 34%; height: 34%; border: 2px solid currentColor; border-radius: 50%; opacity: .25; }
.set-builder-token b { position: absolute; font-size: 1.1rem; }
.set-builder-token.is-selected { border-color: #174e71; background: #73b3df; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .5); }
.set-builder-count { margin: 0; text-align: center; color: #365861; font-weight: 800; }

.fra03-worked {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #edf8f6;
  color: #234850;
}

.fra03-worked span { font-size: .8rem; font-weight: 750; }
.fra03-worked b { color: #0b6570; }

.fra03-repair-pair {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 24px;
}

.fra03-repair-pair > div { display: grid; gap: 10px; place-items: center; }
.fra03-repair-pair small { font-weight: 800; color: #49636b; text-transform: uppercase; letter-spacing: .08em; }

.fra03-handoff {
  width: min(100%, 740px);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 13px;
}

.fra03-handoff span { min-height: 90px; display: grid; place-items: center; border: 2px solid #b8c7c8; border-radius: 17px; background: #fffdf8; }
.fra03-handoff b { color: #31525b; letter-spacing: .08em; }
.fra03-handoff strong { grid-column: 1 / -1; justify-self: center; color: #0b6570; }

.cue-show_partitions .fra03-area-part,
.cue-band_intervals .fra03-interval,
.cue-focus_whole .fra03-area-model,
.cue-focus_whole .fra03-set-boundary,
.cue-focus_wholes .fra03-cross-item { box-shadow: inset 0 0 0 4px rgba(11, 101, 112, .2); }
.fra03-teaching-model .is-teaching-progress .fra03-area-part.is-selected,
.fra03-teaching-model .is-teaching-badges .fra03-token.is-selected { background: #fffdf8; box-shadow: inset 0 -6px 0 rgba(48, 80, 90, .08); }
.fra03-teaching-model .is-teaching-progress .fra03-area-part + .fra03-area-part { border-left-color: transparent; }
.fra03-teaching-model .is-teaching-progress .fra03-area-part.is-selected i,
.fra03-teaching-model .is-teaching-badges .fra03-token.is-selected b { visibility: hidden; }
.cue-show_partitions .fra03-teaching-model .is-teaching-progress .fra03-area-part + .fra03-area-part { border-left-color: #243b45; }
.cue-select_three .fra03-teaching-model .is-teaching-progress .fra03-area-part.is-selected,
.cue-select_three .fra03-teaching-model .is-teaching-badges .fra03-token.is-selected { background: #73b3df; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .5); transform: translateY(-5px); }
.cue-select_three .fra03-teaching-model .is-teaching-progress .fra03-area-part.is-selected i,
.cue-select_three .fra03-teaching-model .is-teaching-badges .fra03-token.is-selected b { visibility: visible; }
.fra03-teaching-model .fra03-number-line.is-route .fra03-mark { left: 0; }
.fra03-teaching-model .fra03-number-line.is-route .fra03-route-you { left: 0; }
.fra03-teaching-model .fra03-number-line.is-route .fra03-interval.is-travelled { background: transparent; }
.cue-move_marker .fra03-teaching-model .fra03-number-line.is-route .fra03-mark { left: var(--marked-position); transform: translateX(-50%) scale(1.25); transition: left 1.05s cubic-bezier(.2, .75, .2, 1); }
.cue-move_marker .fra03-teaching-model .fra03-number-line.is-route .fra03-route-you { left: var(--marked-position); transition: left 1.05s cubic-bezier(.2, .75, .2, 1); }
.cue-move_marker .fra03-teaching-model .fra03-number-line.is-route .fra03-interval.is-travelled { background: rgba(93, 159, 209, .19); }
.cue-show_fraction .fra03-fraction { outline: 4px solid rgba(240, 163, 64, .3); outline-offset: 8px; border-radius: 8px; }

@media (max-width: 760px) {
  .fra03-context-visual { min-height: 270px; }
  .fra03-game-transform { min-height: 300px; }
  .fra03-game-compare { grid-template-columns: 1fr; }
  .fra03-game-compare > div { min-height: 128px; }
  .fra03-game-compare > strong { grid-column: 1; }
  .fra03-cross-model { grid-template-columns: 1fr; }
  .fra03-cross-item { min-height: 125px; }
  .fra03-shared-fraction { grid-column: 1; }
  .fra03-teaching-model { grid-template-columns: 1fr; }
  .fra03-handoff { grid-template-columns: 1fr; }
  .fra03-handoff em { transform: rotate(90deg); }
  .fra03-handoff strong { grid-column: 1; }
}

@media (max-width: 470px) {
  .fra03-context-visual { min-height: 230px; }
  .fra03-game-transform { min-height: 270px; }
  .fra03-game-layer { gap: 11px; }
  .fra03-game-layer.layer-compare { overflow-y: auto; align-content: start; }
  .fra03-game-compare { max-height: 380px; overflow-y: auto; }
  .fra03-area-model { min-width: 0; min-height: 86px; border-width: 3px; }
  .fra03-area-part + .fra03-area-part { border-left-width: 1px; }
  .fra03-area-part.is-selected i { width: 18px; height: 18px; font-size: .65rem; }
  .fra03-set-boundary,
  .fra03-grouped-boundary { padding: 13px; }
  .fra03-token-grid { gap: 8px; }
  .fra03-token { min-width: 27px; border-width: 2px; }
  .fra03-number-line { padding-inline: 5px; }
  .fra03-repair-pair { grid-template-columns: 1fr; gap: 14px; }
  .multiple-choice-answer .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .multi-choice-card { min-height: 125px; padding: 9px; }
  .set-builder-boundary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 13px; }
  .set-builder-token { width: 46px; border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .fra03-area-part,
  .fra03-mark,
  .fra03-game-layer,
  .multi-choice-card,
  .set-builder-token { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

@media (forced-colors: active) {
  .fra03-area-part.is-selected,
  .fra03-token.is-selected,
  .set-builder-token.is-selected { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .fra03-area-model,
  .fra03-set-boundary,
  .fra03-grouped-boundary,
  .set-builder-boundary { border-color: CanvasText; }
}

/* FRA-03 refinement: captions occupy space only while speech is present. */
.teaching-surface:has(.fra03-context-visual) { padding-bottom: 0; }
.progressive-caption-lesson .math-canvas:has(.fra03-context-visual) {
  min-height: 0;
  padding: 24px;
}
.teaching-surface:has(.fra03-context-visual) > .canvas-caption-layer:not([hidden]) {
  position: relative;
  inset: auto;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 24px 12px;
}
.teaching-surface:has(.fra03-context-visual) .canvas-caption {
  position: static;
  max-width: 100%;
}
.teaching-surface:has(.fra03-context-visual) .canvas-caption:empty,
.teaching-surface:has(.fra03-context-visual) .is-complete .canvas-caption { display: none; }
.teaching-surface:has(.fra03-context-visual) .canvas-narration-controls {
  position: static;
  justify-self: end;
}

/* FRA-05: exact and estimated fraction number lines */
.fra05-context-visual {
  width: min(100%, 860px);
  min-height: 330px;
  display: grid;
  place-items: center;
  padding: 20px 34px 30px;
  color: #163d48;
}

.fra05-number-line,
.fra05-runner-track { width: min(100%, 780px); position: relative; }

.fra05-line-kicker,
.fra05-track-heading {
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: #49636b;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.fra05-line-kicker b { color: #7255a5; letter-spacing: 0; text-transform: none; }

.fra05-whole-brackets {
  height: 54px;
  position: relative;
  margin: 8px 0 0;
}

.fra05-whole-brackets span {
  position: absolute;
  left: calc((100% / var(--wholes)) * var(--whole));
  width: calc(100% / var(--wholes));
  height: 30px;
  border-top: 3px solid #13939d;
}

.fra05-whole-brackets span::before,
.fra05-whole-brackets span::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 3px;
  height: 12px;
  background: #13939d;
}
.fra05-whole-brackets span::before { left: 0; }
.fra05-whole-brackets span::after { right: 0; }
.fra05-whole-brackets b { position: absolute; inset: 7px 0 auto; text-align: center; color: #0b6570; font-size: .76rem; }

.fra05-line-wrap { position: relative; padding: 40px 0 46px; }
.fra05-line-hit { position: relative; height: 82px; touch-action: none; }
.fra05-number-line.is-interactive .fra05-line-hit { cursor: crosshair; }
.fra05-axis { position: absolute; left: 0; right: 0; top: 42px; height: 5px; border-radius: 4px; background: #173f4a; }
.fra05-estimate-guide { position: absolute; inset: 0; pointer-events: none; }
.fra05-estimate-guide span { position: absolute; left: var(--guide); top: 28px; height: 35px; border-left: 2px dashed rgba(114, 85, 165, .42); }
.fra05-estimate-comparisons { position: absolute; inset: 0; pointer-events: none; }
.fra05-estimate-comparison { position: absolute; left: var(--comparison); top: 27px; width: 1px; height: 48px; color: #9b4f2d; }
.fra05-estimate-comparison > i { position: absolute; top: 0; left: -1px; width: 3px; height: 35px; border-radius: 3px; background: currentColor; }
.fra05-estimate-comparison > b { position: absolute; top: 37px; left: 50%; transform: translateX(-50%); font-size: .85rem; white-space: nowrap; }
.fra05-estimate-comparison > em { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 999px; background: #fff0e5; font-size: .64rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.fra05-estimate-comparison.is-best { color: #0b727b; }
.fra05-estimate-comparison.is-best > i { width: 5px; left: -2px; box-shadow: 0 0 0 4px rgba(19, 147, 157, .14); }
.fra05-estimate-comparison.is-best > em { background: #e5f7f3; }

.fra05-tick {
  position: absolute;
  left: var(--tick);
  top: 29px;
  width: 3px;
  height: 31px;
  transform: translateX(-50%);
  background: #365a64;
  border-radius: 2px;
  transition: height .18s ease, background .18s ease;
}
.fra05-tick.is-major { top: 23px; height: 43px; width: 5px; background: #173f4a; }
.fra05-tick.is-selected { top: 19px; height: 51px; background: #7255a5; box-shadow: 0 0 0 5px rgba(114, 85, 165, .16); }

.fra05-bands { position: absolute; inset: 12px 0 24px; display: flex; }
.fra05-bands > span {
  position: absolute;
  left: calc((100% / var(--bands)) * var(--band));
  width: calc(100% / var(--bands));
  height: 34px;
  background: rgba(41, 132, 186, .1);
  border: 1px solid transparent;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .25s ease, transform .25s ease;
}
.fra05-bands > span.is-visible,
.cue-reveal_equal_gaps .fra05-bands > span,
.cue-partition_line .fra05-bands > span,
.cue-sweep_intervals .fra05-bands > span { opacity: 1; transform: translateY(0); border-color: rgba(41, 132, 186, .25); }
.fra05-bands > span.is-to-point { background: rgba(41, 132, 186, .25); }
.fra05-bands i { position: absolute; inset: 5px 0 auto; text-align: center; color: #225c80; font-style: normal; font-size: .72rem; font-weight: 850; }

.fra05-fixed-point,
.fra05-selected-point {
  position: absolute;
  left: var(--point);
  top: 1px;
  width: 44px;
  height: 64px;
  transform: translateX(-50%);
  opacity: 0;
  transition: left .18s ease, opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.fra05-fixed-point.is-visible,
.fra05-selected-point:not([hidden]),
.cue-mark_point .fra05-fixed-point,
.cue-show_estimate_point .fra05-fixed-point { opacity: 1; }
.fra05-fixed-point b,
.fra05-selected-point b {
  position: absolute;
  left: 50%;
  top: -21px;
  transform: translateX(-50%);
  color: #7255a5;
  font-size: 1.05rem;
}
.fra05-fixed-point i,
.fra05-selected-point i {
  position: absolute;
  left: 50%;
  top: 31px;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 4px solid #fffdf8;
  border-radius: 50%;
  background: #7255a5;
  box-shadow: 0 2px 0 #52377d, 0 0 0 2px #7255a5;
}

.fra05-anchor-labels { position: absolute; left: 0; right: 0; bottom: 23px; height: 28px; }
.fra05-anchor { position: absolute; left: var(--anchor); transform: translateX(-50%); color: #163d48; font-size: .96rem; font-weight: 850; }
.fra05-line-answer { min-height: 58px; display: grid; place-items: center; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.fra05-number-line.is-revealed .fra05-line-answer,
.cue-reveal_fraction .fra05-line-answer { opacity: 1; transform: translateY(0); }
.fra05-fraction { display: inline-grid; grid-template-rows: auto 2px auto; min-width: 38px; vertical-align: middle; text-align: center; line-height: 1; }
.fra05-fraction i { display: block; height: 2px; background: currentColor; }
.fra05-fraction b { padding: 3px 5px; font-size: 1.05rem; }
.fra05-line-fraction { color: #7255a5; font-size: 1.15rem; }
.fra05-estimate-conclusion { display: inline-flex; align-items: center; gap: 10px; color: #31525b; font-size: .82rem; font-weight: 850; }

.fra05-track-line { position: relative; height: 120px; margin-top: 24px; }
.fra05-track-line::before { content: ""; position: absolute; left: 0; right: 0; top: 66px; height: 8px; border-radius: 7px; background: #173f4a; }
.fra05-track-markers span { position: absolute; left: calc((100% / var(--fra05-gaps)) * var(--marker)); top: 49px; width: 24px; height: 43px; transform: translateX(-50%); }
.fra05-track-markers span > i { display: block; width: 17px; height: 42px; margin: auto; border-radius: 9px 9px 3px 3px; background: #f0a340; border: 3px solid #173f4a; }
.fra05-runner { position: absolute; left: 50%; top: -47px; width: 52px; height: 52px; transform: translateX(-50%); display: grid; place-items: center; border: 4px solid #fffdf8; border-radius: 50%; background: #7255a5; color: white; box-shadow: 0 4px 0 #52377d; }
.fra05-gap-bands span { position: absolute; left: calc((100% / var(--fra05-gaps)) * var(--gap)); top: 59px; width: calc(100% / var(--fra05-gaps)); height: 23px; opacity: 0; background: rgba(41, 132, 186, .16); border-inline: 1px solid rgba(41, 132, 186, .4); }
.fra05-gap-bands span.is-travelled { background: rgba(41, 132, 186, .32); }
.fra05-gap-bands span.is-travelled i { position: absolute; left: 6%; right: 6%; top: 9px; height: 4px; background: #225c80; }
.fra05-runner-track.is-revealed .fra05-gap-bands span,
.cue-reveal_equal_gaps .fra05-gap-bands span { opacity: 1; }
.cue-highlight_travelled_gaps .fra05-gap-bands span.is-travelled { opacity: 1; box-shadow: inset 0 0 0 2px #225c80; }
.cue-focus_markers .fra05-track-markers span > i { box-shadow: 0 0 0 5px rgba(240, 163, 64, .24); }
.cue-count_step_1 .fra05-bands > span:nth-child(-n+1),
.cue-count_step_2 .fra05-bands > span:nth-child(-n+2),
.cue-count_step_3 .fra05-bands > span:nth-child(-n+3),
.cue-count_step_4 .fra05-bands > span:nth-child(-n+4),
.cue-count_step_5 .fra05-bands > span:nth-child(-n+5),
.cue-reach_one .fra05-bands > span:nth-child(-n+4),
.cue-trace_from_zero .fra05-bands > span.is-to-point { opacity: 1; transform: translateY(0); background: rgba(41, 132, 186, .28); border-color: rgba(34, 92, 128, .5); }
.cue-show_estimate_guide .fra05-number-line.is-estimate::after { content: "nearby fraction guide"; display: block; margin-top: 8px; color: #7255a5; font-size: .76rem; font-weight: 800; text-align: center; }
.cue-count_step_1 .fra05-bands > span:nth-child(-n+1), .cue-count_step_2 .fra05-bands > span:nth-child(-n+2),
.cue-count_step_3 .fra05-bands > span:nth-child(-n+3), .cue-count_step_4 .fra05-bands > span:nth-child(-n+4),
.cue-count_step_5 .fra05-bands > span:nth-child(-n+5), .cue-reach_one .fra05-bands > span:nth-child(-n+4) { opacity: 1; transform: translateY(0); }
.fra05-track-labels { display: flex; justify-content: space-between; margin-top: -18px; font-size: 1.05rem; }
.fra05-runner-callouts { min-height: 66px; display: grid; place-items: center; }
.fra05-tempting { display: inline-flex; align-items: center; gap: 4px; color: #b56038; opacity: 0; }
.fra05-reveal-fraction { display: none; color: #7255a5; }
.cue-show_tempting_fraction .fra05-tempting { opacity: 1; }
.fra05-runner-track.is-revealed .fra05-tempting { display: none; }
.fra05-runner-track.is-revealed .fra05-reveal-fraction,
.cue-reveal_fraction .fra05-reveal-fraction { display: inline-grid; }

.tick-selector-answer { margin: 0; padding: 0; border: 0; }
.tick-selector-answer legend { margin-bottom: 10px; color: #31525b; font-size: .82rem; font-weight: 850; }
.tick-selector-controls { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: stretch; gap: 10px; }
.tick-nudge,
.tick-selector-slider { min-height: 48px; border: 2px solid #adc2c7; background: #fffdf8; color: #173f4a; }
.tick-nudge { border-radius: 13px; font-size: 1.55rem; font-weight: 850; }
.tick-selector-slider { padding: 8px 14px; border-radius: 13px; display: grid; place-items: center; gap: 2px; }
.tick-selector-slider span { font-weight: 850; }
.tick-selector-slider small { color: #49636b; }
.tick-nudge:hover,
.tick-selector-slider:hover { border-color: #7255a5; }
.tick-nudge:focus-visible,
.tick-selector-slider:focus-visible { outline: 4px solid rgba(114, 85, 165, .3); outline-offset: 2px; }

@media (max-width: 620px) {
  .fra05-context-visual { min-height: 270px; padding: 16px 18px 24px; }
  .fra05-whole-brackets { height: 44px; }
  .fra05-line-wrap { padding-top: 30px; }
  .fra05-line-kicker { font-size: .62rem; }
  .fra05-estimate-comparison > em { display: none; }
  .fra05-track-heading strong { display: none; }
  .tick-selector-controls { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 7px; }
  .tick-selector-slider { padding-inline: 8px; }
  .tick-selector-slider small { font-size: .65rem; }
}

@media (max-width: 410px) {
  .fra05-context-visual { min-height: 235px; padding-inline: 11px; }
  .fra05-line-kicker b { display: none; }
  .fra05-tick { height: 25px; }
  .fra05-number-line:not(.is-interactive) .fra05-line-wrap { margin-inline: 5px; }
  .fra05-fraction b { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fra05-tick,
  .fra05-bands > span,
  .fra05-fixed-point,
  .fra05-selected-point,
  .fra05-line-answer { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

@media (forced-colors: active) {
  .fra05-axis,
  .fra05-tick,
  .fra05-whole-brackets span { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; }
  .fra05-bands > span { border-color: CanvasText; }
  .fra05-fixed-point i,
  .fra05-selected-point i { background: Highlight; }
}
/* FRA-06 canonical form-classification visuals and compound controls. */
.fra06-context-visual { width: min(100%, 920px); margin-inline: auto; }
.fra06-fraction { display: inline-grid; grid-template-rows: auto 2px auto; min-width: 2.2rem; text-align: center; vertical-align: middle; font: 800 clamp(1.25rem, 3vw, 2.15rem)/1 var(--font-display, inherit); color: #173b4d; }
.fra06-fraction > i { display: block; height: 2px; margin: .16em 0; background: currentColor; }
.fra06-mixed { display: inline-flex; align-items: center; gap: .35rem; font-size: clamp(1.7rem, 4vw, 2.8rem); color: #173b4d; }
.fra06-mixed > b { font: 800 1em/1 var(--font-display, inherit); }
.fra06-card-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.fra06-card, .fra06-symbol-card { display: grid; place-items: center; min-width: 6.4rem; min-height: 5.4rem; padding: .8rem 1rem; border: 2px solid #1d6174; border-radius: 1rem; background: #fffdf7; box-shadow: 0 .45rem 0 rgba(23,59,77,.10); }
.fra06-hook, .fra06-fraction-line, .fra06-mixed-model, .fra06-sort-visual { display: grid; width: 100%; gap: 1.4rem; }
.fra06-symbol-card { justify-self: center; }
.fra06-line { position: relative; width: calc(100% - 3rem); max-width: 860px; min-height: 7.4rem; margin: .25rem auto 0; padding-top: 3rem; box-sizing: border-box; }
.fra06-axis { position: relative; width: 100%; height: 5px; margin-top: 1.2rem; border-radius: 999px; background: #173b4d; }
.fra06-tick { position: absolute; left: var(--tick); top: 50%; transform: translate(-50%,-50%); width: 2px; height: 1.1rem; background: #173b4d; }
.fra06-tick.is-whole { width: 3px; height: 1.65rem; }
.fra06-tick b { position: absolute; top: 1.6rem; left: 50%; transform: translateX(-50%); font-size: .9rem; }
.fra06-point { position: absolute; left: var(--point); top: 50%; transform: translate(-50%,-50%); width: 1.2rem; height: 1.2rem; border: 3px solid #fff; border-radius: 50%; background: #e36d3b; box-shadow: 0 0 0 2px #a84425; z-index: 3; }
.fra06-point > i { position: absolute; left: 50%; bottom: calc(100% + .45rem); transform: translateX(-50%); padding: .12rem .34rem; border-radius: .35rem; background: #fffdf7; color: #8f3e21; font: 900 .82rem/1 var(--font-display, inherit); font-style: normal; box-shadow: 0 1px 4px rgba(23,59,77,.15); }
.fra06-one-checkpoint { position: absolute; left: var(--one); top: 0; bottom: .7rem; border-left: 2px dashed #c45b2d; }
.fra06-one-checkpoint span { position: absolute; top: 0; left: 0; transform: translateX(-50%); width: max-content; max-width: 10rem; padding: .25rem .5rem; border-radius: .4rem; background: #fff1d5; color: #75401f; font-size: .7rem; font-weight: 850; letter-spacing: .04em; text-align: center; }
.fra06-bars { display: grid; grid-template-columns: repeat(auto-fit,minmax(6.4rem,1fr)); gap: .55rem; }
.fra06-whole-bar { min-height: 2.75rem; border: 2px solid #1d6174; border-radius: .5rem; overflow: hidden; background: #fff; }
.fra06-whole-bar.is-full { display: grid; place-items: center; background: repeating-linear-gradient(135deg,#77c7c3 0 10px,#a8ded7 10px 20px); color: #173b4d; font-weight: 800; }
.fra06-whole-bar.is-parts { display: grid; grid-template-columns: repeat(var(--parts),1fr); }
.fra06-whole-bar.is-parts i { border-right: 1px solid #1d6174; background: #fff; }
.fra06-whole-bar.is-parts i.is-selected { background: repeating-linear-gradient(135deg,#77c7c3 0 8px,#a8ded7 8px 16px); }
.fra06-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.fra06-labels span, .fra06-bin-row span { padding: .38rem .65rem; border: 1px solid #1d6174; border-radius: 999px; background: #eef8f5; color: #173b4d; font-size: .76rem; font-weight: 850; letter-spacing: .04em; }
.fra06-decision { display: grid; gap: 1rem; text-align: center; }
.fra06-decision > strong { padding: .7rem 1rem; border-radius: .75rem; background: #173b4d; color: white; }
.fra06-decision > div { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.fra06-decision article { display: grid; gap: .55rem; padding: 1rem; border: 2px solid #77aeb4; border-radius: .8rem; background: #fffdf7; }
.fra06-decision span { color: #a84425; font-weight: 900; }
.fra06-bin-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; text-align: center; }
.fra06-bin-row span { border-radius: .7rem; }
.fra06-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.fra06-contrast article { display: grid; place-items: center; gap: .7rem; min-height: 7rem; padding: 1rem; border: 2px solid #77aeb4; border-radius: 1rem; background: #fffdf7; }
.fra06-contrast small { color: #52666f; font-weight: 800; }
.classification-sort-input, .compound-response-input { display: grid; gap: .75rem; }
.classification-sort-row { display: grid; grid-template-columns: minmax(5.5rem,1fr) minmax(10rem,1.5fr); gap: .75rem; align-items: center; padding: .6rem; border: 1px solid rgba(23,59,77,.18); border-radius: .75rem; }
.classification-sort-row strong { color: #173b4d; font-size: 1.05rem; }
.compound-response-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(10rem,1fr)); gap: .75rem; }
.compound-response-grid label, .classification-sort-row label { display: grid; gap: .35rem; color: #344d58; font-size: .84rem; font-weight: 750; }
.compound-response-grid select, .classification-sort-row select { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 2px solid #668891; border-radius: .65rem; background: white; color: #173b4d; font: inherit; }
.compound-response-grid select:focus-visible, .classification-sort-row select:focus-visible { outline: 3px solid #e9a742; outline-offset: 2px; }
@media (max-width: 430px) {
  .fra06-card-row, .fra06-decision > div, .fra06-contrast, .fra06-bin-row { grid-template-columns: 1fr; display: grid; }
  .fra06-card { width: 100%; min-height: 4.6rem; }
  .fra06-line { width: calc(100% - 1rem); margin-inline: auto; }
  .fra06-one-checkpoint span { max-width: 7rem; font-size: .62rem; }
  .classification-sort-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fra06-context-visual *, .classification-sort-input * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* FRA13 owner-approved fraction-of-an-amount lesson. */
.fra13-context-visual { width: min(100%, 800px); min-height: 300px; margin-inline: auto; padding: clamp(.7rem, 2vw, 1.25rem); }
.fra13-context-visual, .fra13-context-visual * { box-sizing: border-box; }
.fra13-visual { width: 100%; color: #173132; }
.fra13-hook { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: clamp(.55rem,2vw,1rem); align-items: stretch; }
.fra13-reward-card { display: grid; align-content: start; gap: .75rem; min-height: 245px; padding: clamp(.8rem,2vw,1.25rem); border: 2px solid #d3c28c; border-radius: 1.25rem; background: linear-gradient(145deg,#fffdfa,#fff5d9); box-shadow: 0 .55rem 1.2rem rgba(56,62,46,.1); }
.fra13-reward-card > span { color: #796531; font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.fra13-reward-card > strong { justify-self: center; margin-top: auto; font-size: clamp(1rem,2.5vw,1.35rem); }
.fra13-or { align-self: center; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #173132; color: #fff; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.fra13-hook.is-revealed .card-a { opacity: .55; transform: scale(.97); }
.fra13-hook.is-revealed .card-b { border-color: #147d78; box-shadow: 0 0 0 4px #d9f0e9,0 .55rem 1.2rem rgba(56,62,46,.1); }
.fra13-card-fraction, .fra13-expression { display: flex; align-items: center; justify-content: center; gap: .55rem; }
.fra13-card-fraction > b { font-size: 1rem; }
.fra13-fraction { display: inline-grid; grid-template-rows: auto 2px auto; min-width: 2rem; text-align: center; color: #0b5d59; font: 900 clamp(1.05rem,3vw,1.7rem)/1 Georgia,serif; }
.fra13-fraction > i { height: 2px; margin: .15em 0; background: currentColor; }
.fra13-token-row { display: grid; grid-template-columns: repeat(5,minmax(12px,1fr)); gap: clamp(.25rem,1vw,.42rem); width: 100%; }
.fra13-token-row > i { display: block; aspect-ratio: 1; border: 2px solid #9b7326; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff1a5,#e3a734 58%,#a96e19); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.fra13-neutral-tokens > i { border-color: #6b7a79; background: #e5e9e5; box-shadow: none; }
.fra13-groups { display: grid; grid-template-columns: repeat(var(--groups),minmax(0,1fr)); gap: clamp(.35rem,1.2vw,.65rem); width: 100%; }
.fra13-group { min-width: 0; padding: .55rem; border: 2px solid #9cb6b1; border-radius: .9rem; background: #fbfffd; }
.fra13-group .fra13-token-row { grid-template-columns: repeat(auto-fit,minmax(10px,1fr)); gap: .2rem; }
.fra13-group .fra13-token-row > i { border-width: 1px; }
.fra13-group.is-selected { border-color: #147d78; background: #d9f0e9; box-shadow: inset 0 0 0 2px rgba(20,125,120,.12); }
.fra13-equal-model, .fra13-question-model, .fra13-workspace, .fra13-plan-visual, .fra13-expression-card, .fra13-context-card, .fra13-ungrouped, .fra13-repair-model { display: grid; gap: 1.15rem; place-items: center; width: 100%; }
.fra13-expression { width: fit-content; padding: .55rem .9rem; border-radius: 999px; background: #fffdf8; box-shadow: 0 0 0 1px #cbd8d4; }
.fra13-expression > span { color: #617171; font-weight: 800; }
.fra13-expression > strong { font-size: clamp(1.05rem,3vw,1.5rem); }
.fra13-running-totals { display: flex; gap: .45rem; justify-content: center; }
.fra13-running-totals span { display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #147d78; color: #fff; font-weight: 900; }
.fra13-method-line { display: flex; gap: .65rem; align-items: center; padding: .65rem .85rem; border-radius: .75rem; background: #173132; color: #fff; }
.fra13-empty-method { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: .7rem; align-items: end; width: min(100%,580px); }
.fra13-empty-method span { color: #526665; font-size: .78rem; font-weight: 800; }
.fra13-empty-method i { width: 2.4rem; border-bottom: 3px solid #91aaa5; }
.fra13-plan-visual > div:not(.fra13-expression):not(.fra13-working) { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; justify-content: center; }
.fra13-plan-visual > div span { padding: .6rem .75rem; border: 2px solid #9cb6b1; border-radius: .75rem; background: #fff; font-weight: 850; }
.fra13-context-card { grid-template-columns: minmax(125px,.7fr) minmax(180px,1fr); width: min(100%,620px); padding: 1rem; border: 2px solid #c7d7d2; border-radius: 1.2rem; background: #fffdf8; }
.fra13-context-icon { display: grid; place-items: center; gap: .45rem; width: 100%; min-height: 135px; border-radius: 1rem; background: #e8f4f0; color: #0b5d59; font-weight: 900; text-transform: capitalize; }
.fra13-context-icon i { display: block; width: 4rem; height: 4rem; border: .75rem solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 .3rem #fff; }
.fra13-context-icon.is-game_voucher i,.fra13-context-icon.is-prize_fund_card i,.fra13-context-icon.is-money_expression i,.fra13-context-icon.is-fund_context i { width: 5rem; height: 3.2rem; border-width: .35rem; border-radius: .55rem; box-shadow: inset 0 0 0 .2rem #fff; }
.fra13-context-icon.is-bag_context i { width: 4.5rem; height: 4.8rem; border-width: .4rem; border-radius: .6rem 1.4rem 1.4rem 1.4rem; }
.fra13-work-sample { display: grid; place-items: center; gap: .55rem; width: min(100%,520px); padding: 1.2rem; border: 2px solid #c9d4cc; border-radius: 1rem; background: #fffef9; }
.fra13-work-sample > span { color: #617171; font-weight: 800; }
.fra13-work-sample > strong { font: 900 clamp(1.35rem,4vw,2rem)/1.2 Georgia,serif; }
.fra13-work-sample > i { color: #a45c3d; font-size: 1.5rem; }
.fra13-working { display: grid; gap: .5rem; width: min(100%,600px); margin-top: .35rem; }
.fra13-working > div { display: grid; grid-template-columns: 2.1rem 1fr; gap: .65rem; align-items: center; padding: .6rem .75rem; border: 1px solid #b9d4c9; border-radius: .75rem; background: #edf8f3; animation: fra13-step-in .35s ease both; animation-delay: calc(var(--step) * .18s); }
.fra13-working span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #147d78; color: #fff; font-size: .76rem; }
.fra13-working b { font-weight: 800; }
.fra13-group-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; width: 100%; }
.fra13-group-contrast > div { display: grid; gap: .55rem; padding: .75rem; border: 2px solid #c6d5d0; border-radius: 1rem; text-align: center; }
.fra13-group-contrast .is-wrong { border-color: #d89a8c; background: #fff3ef; opacity: .72; }
.fra13-group-contrast .is-right { border-color: #67a58f; background: #eaf7f1; }
.fra13-role-arrows { display: flex; gap: 1.3rem; align-items: center; justify-content: center; }
.fra13-role-arrows > div { display: grid; gap: .55rem; }
.fra13-role-arrows span { padding: .65rem .8rem; border-left: 4px solid #147d78; background: #e8f4f0; }
.fra13-operator-contrast { display: grid; gap: .65rem; width: min(100%,610px); }
.fra13-operator-contrast > span { padding: .8rem 1rem; border: 2px solid; border-radius: .8rem; font-weight: 900; }
.fra13-operator-contrast .is-wrong { border-color: #d88b79; background: #fff1ed; text-decoration: line-through; }
.fra13-operator-contrast .is-right { border-color: #58a184; background: #e8f7f0; }
.fra13-operator-contrast small { color: #526665; font-weight: 750; }
.fra13-handoff { display: flex; gap: 1rem; align-items: center; justify-content: center; min-height: 180px; font-size: clamp(1.1rem,3vw,1.7rem); }
.fra13-handoff span { color: #617171; }
.fra13-handoff i { color: #147d78; font-size: 2rem; }
.fra13-handoff strong { padding: .7rem 1rem; border-radius: .75rem; background: #147d78; color: #fff; }
.two-step-answer { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; border: 0; padding: 0; }
.two-step-answer legend { grid-column: 1/-1; margin-bottom: .3rem; font-weight: 850; }
.two-step-answer label { display: grid; gap: .35rem; padding: .75rem; border: 1px solid #cbd8d4; border-radius: .8rem; background: #fff; }
.two-step-answer label span { font-weight: 800; }
.two-step-answer label small { color: #617171; }
.two-step-answer input,.unit-input input { min-width: 0; width: 100%; min-height: 48px; padding: .65rem .75rem; border: 2px solid #78948e; border-radius: .65rem; background: #fff; color: #173132; font: 800 1.05rem/1.2 inherit; }
.unit-input { display: flex; align-items: center; gap: .55rem; }
.unit-input b { color: #526665; font-size: 1rem; }
.money-answer > small { color: #617171; font-size: .78rem; }
.two-step-answer input:focus-visible,.unit-input input:focus-visible { outline: none; border-color: #147d78; box-shadow: var(--focus); }
@keyframes fra13-step-in { from { opacity: 0; transform: translateY(.4rem); } }

@media (max-width: 480px) {
  .fra13-context-visual { min-height: 245px; padding: .4rem; }
  .fra13-hook { grid-template-columns: 1fr; }
  .fra13-or { width: 2rem; height: 2rem; margin: -.35rem auto; z-index: 2; }
  .fra13-reward-card { min-height: 165px; }
  .fra13-reward-card .fra13-token-row { grid-template-columns: repeat(10,1fr); }
  .fra13-groups { grid-template-columns: repeat(min(var(--groups),3),minmax(0,1fr)); }
  .fra13-context-card,.fra13-group-contrast,.two-step-answer { grid-template-columns: 1fr; }
  .fra13-context-icon { min-height: 92px; }
  .fra13-context-icon i { width: 3rem; height: 3rem; border-width: .55rem; }
  .fra13-empty-method { grid-template-columns: 1fr auto; }
  .fra13-role-arrows { align-items: stretch; flex-direction: column; }
  .choice-card,.hint-toggle,.primary-button,.secondary-button,.quiet-button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .fra13-context-visual * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .fra13-token-row > i,.fra13-group,.fra13-reward-card,.fra13-working > div { forced-color-adjust: none; border-color: CanvasText; background: Canvas; color: CanvasText; }
  .fra13-group.is-selected,.fra13-running-totals span,.fra13-handoff strong { background: Highlight; color: HighlightText; }
}
/* FRA14: find the whole from a fractional part. Scoped to the canonical primitive. */
.fra14-context-visual {
  width: min(100%, 760px);
}

.fra14-visual {
  width: 100%;
  color: #253348;
}

.fra14-bar-card {
  position: relative;
  display: grid;
  gap: .58rem;
  width: 100%;
  padding: 1.25rem 1.2rem 1.05rem;
  border: 2px solid #a9bfd0;
  border-radius: 1.15rem;
  background: linear-gradient(160deg, #fffef9, #edf6fa);
  box-shadow: 0 .55rem 1.4rem rgb(43 65 82 / .12);
  overflow: hidden;
}

.fra14-context-mark {
  position: absolute;
  inset: .7rem .8rem auto auto;
  display: flex;
  align-items: center;
  gap: .18rem;
  opacity: .55;
}

.fra14-context-mark span,
.fra14-context-mark i {
  display: block;
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: #4d7895;
}

.context-route_bar .fra14-context-mark i,
.context-cable_bar .fra14-context-mark i {
  width: 2.2rem;
  height: .22rem;
  border-radius: 999px;
}

.context-shipment_bar .fra14-context-mark span {
  border-radius: .08rem;
  box-shadow: .65rem 0 #4d7895, 1.3rem 0 #4d7895;
}

.fra14-fraction-label {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.2rem;
  font-weight: 800;
  color: #335978;
}

.fra14-fraction {
  display: inline-grid;
  grid-template-rows: auto 2px auto;
  align-items: center;
  min-width: 1.9rem;
  text-align: center;
  line-height: 1;
  font-size: 1.08rem;
}

.fra14-fraction i {
  width: 100%;
  height: 2px;
  background: currentColor;
}

.fra14-known-bracket,
.fra14-whole-bracket {
  position: relative;
  height: 1.85rem;
  font-size: .86rem;
  font-weight: 850;
  color: #305a78;
}

.fra14-known-bracket {
  width: calc(100% * var(--known-span) / var(--total-sections));
  border-top: 3px solid #2e6f9b;
}

.fra14-known-bracket::before,
.fra14-known-bracket::after,
.fra14-whole-bracket::before,
.fra14-whole-bracket::after {
  content: "";
  position: absolute;
  width: 3px;
  height: .55rem;
  background: currentColor;
}

.fra14-known-bracket::before,
.fra14-whole-bracket::before { left: 0; top: 0; }
.fra14-known-bracket::after,
.fra14-whole-bracket::after { right: 0; top: 0; }

.fra14-known-bracket span,
.fra14-whole-bracket span {
  display: block;
  padding-top: .38rem;
  text-align: center;
}

.fra14-bar {
  display: grid;
  grid-template-columns: repeat(var(--total-sections), minmax(0, 1fr));
  width: 100%;
  min-height: 7.25rem;
  border: 3px solid #42657e;
  border-radius: .55rem;
  overflow: hidden;
  background: #fff;
}

.fra14-section {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border-inline-end: 2px solid #42657e;
  background: #f5f8fa;
  transition: background .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.fra14-section:last-child { border-inline-end: 0; }

.fra14-section.is-known {
  background: repeating-linear-gradient(135deg, #f8cc70 0 10px, #f3bc51 10px 20px);
}

.fra14-section.is-hidden-finish {
  background: repeating-linear-gradient(135deg, #d8e1e7 0 8px, #edf2f5 8px 16px);
}

.fra14-section-value {
  position: relative;
  z-index: 1;
  padding: .28rem .4rem;
  border-radius: .45rem;
  background: rgb(255 255 255 / .9);
  color: #26394a;
  font-size: clamp(.72rem, 2vw, 1rem);
  white-space: nowrap;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
}

.fra14-section-value.is-hidden {
  opacity: 0;
  transform: translateY(.5rem);
}

.fra14-section-value[data-reveal-text]::after,
.fra14-whole-result[data-reveal-text]::after,
.fra14-working strong[data-reveal-text]::after { content: ""; }

.fra14-whole-bracket {
  border-bottom: 3px solid #58758a;
  color: #425d70;
}

.fra14-whole-bracket::before,
.fra14-whole-bracket::after { top: auto; bottom: 0; }

.fra14-whole-bracket span { padding-top: 0; padding-bottom: .42rem; }
.fra14-whole-result { display: none !important; color: #1c714b; }
.fra14-visual[data-reveal="true"] .fra14-whole-pending { display: none; }
.fra14-visual[data-reveal="true"] .fra14-whole-result { display: block !important; }

.fra14-working {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .35rem;
}

.fra14-work-step,
.fra14-forward-check {
  display: grid;
  gap: .18rem;
  padding: .68rem .75rem;
  border: 1px solid #b6c7d3;
  border-radius: .65rem;
  background: #fff;
}

.fra14-work-step small,
.fra14-forward-check small {
  color: #53697a;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.fra14-work-step strong,
.fra14-forward-check strong { font-size: 1.05rem; }
.fra14-forward-check { grid-column: 1 / -1; }

.fra14-finish {
  position: absolute;
  right: .9rem;
  top: 5rem;
  width: .35rem;
  height: 3.4rem;
  border-radius: .15rem;
  background: #32495b;
  opacity: 0;
}

.fra14-finish::after {
  content: "";
  position: absolute;
  left: .35rem;
  top: 0;
  width: 1.5rem;
  height: 1rem;
  background: repeating-conic-gradient(#fff 0 25%, #263746 0 50%) 0 / .5rem .5rem;
}

.fra14-handoff {
  margin-bottom: .7rem;
}

.fra14-method-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: .55rem;
  padding: .75rem;
  border-radius: .8rem;
  background: #e7f0f6;
  color: #2e526d;
  font-weight: 850;
  text-align: center;
}

.choice-and-integer-answer {
  display: grid;
  gap: 1rem;
  padding: 0;
  border: 0;
}

.choice-and-integer-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.choice-and-integer-fields label {
  display: grid;
  gap: .35rem;
  font-weight: 800;
}

.fra14-option-model {
  display: grid;
  gap: .35rem;
  width: 100%;
}

.fra14-option-bar {
  display: grid;
  grid-template-columns: repeat(var(--total-sections), minmax(0, 1fr));
  min-height: 2.5rem;
  border: 2px solid #4d6679;
  border-radius: .3rem;
  overflow: hidden;
}

.fra14-option-bar i {
  border-inline-end: 1px solid #4d6679;
  background: #f3f6f8;
}

.fra14-option-bar i:last-child { border-inline-end: 0; }
.fra14-option-bar i.is-known { background: #f4c35d; }

/* Speech-bound completed states. The cue class is derived from the canonical cue ID. */
.cue-cue-hook-known-three .fra14-section.is-known,
.cue-cue-t1-three-parts .fra14-section.is-known,
.cue-cue-g1-known-three .fra14-section.is-known,
.cue-cue-g2-one-part .fra14-section.is-known {
  box-shadow: inset 0 0 0 4px #1f6e9e;
}

.cue-cue-hook-one-section .fra14-section:first-child,
.cue-cue-t4-one-part .fra14-section:first-child,
.cue-cue-r-onepart-one-ninth .fra14-section:first-child {
  box-shadow: inset 0 0 0 4px #1f6e9e;
}

.cue-cue-t2-divide-three .scene-t2 .fra14-work-step.step-one,
.cue-cue-t2-numerator-divisor .scene-t2 .fra14-work-step.step-one,
.cue-cue-t3-divide .scene-t3 .fra14-work-step.step-one,
.cue-cue-r-roles-divide .fra14-work-step.step-one {
  border-color: #2374a5;
  box-shadow: 0 0 0 4px rgb(35 116 165 / .18);
}

.scene-t2 .fra14-section-value,
.scene-t2 .fra14-working { opacity: 0; }
.cue-cue-t2-divide-three .scene-t2 .fra14-working,
.cue-cue-t2-eight .scene-t2 .fra14-working,
.cue-cue-t2-numerator-divisor .scene-t2 .fra14-working,
.cue-cue-t2-eight .scene-t2 .fra14-section.is-known .fra14-section-value,
.cue-cue-t2-numerator-divisor .scene-t2 .fra14-section.is-known .fra14-section-value { opacity: 1; transform: translateY(0); }
.cue-cue-t2-eight .scene-t2 .fra14-section.is-known .fra14-section-value::after,
.cue-cue-t2-numerator-divisor .scene-t2 .fra14-section.is-known .fra14-section-value::after { content: attr(data-reveal-text); }

.cue-cue-t3-reveal-fourth .scene-t3 .fra14-section.is-unknown .fra14-section-value,
.cue-cue-t3-thirty-two .scene-t3 .fra14-section.is-unknown .fra14-section-value,
.cue-cue-t3-divide .scene-t3 .fra14-section.is-unknown .fra14-section-value,
.cue-cue-t3-multiply .scene-t3 .fra14-section.is-unknown .fra14-section-value,
.cue-cue-t4-five-parts .scene-t4 .fra14-section .fra14-section-value,
.cue-cue-t4-forty-five .scene-t4 .fra14-section .fra14-section-value,
.cue-cue-t4-check .scene-t4 .fra14-section .fra14-section-value,
.cue-cue-r-scale-build .fra14-section .fra14-section-value,
.cue-cue-r-onepart-all-nine .fra14-section .fra14-section-value { opacity: 1; transform: translateY(0); }
.cue-cue-t3-reveal-fourth .scene-t3 .fra14-section.is-unknown .fra14-section-value::after,
.cue-cue-t3-thirty-two .scene-t3 .fra14-section.is-unknown .fra14-section-value::after,
.cue-cue-t3-divide .scene-t3 .fra14-section.is-unknown .fra14-section-value::after,
.cue-cue-t3-multiply .scene-t3 .fra14-section.is-unknown .fra14-section-value::after,
.cue-cue-t4-five-parts .scene-t4 .fra14-section .fra14-section-value::after,
.cue-cue-t4-forty-five .scene-t4 .fra14-section .fra14-section-value::after,
.cue-cue-t4-check .scene-t4 .fra14-section .fra14-section-value::after,
.cue-cue-r-scale-split .fra14-section.is-known .fra14-section-value::after,
.cue-cue-r-scale-build .fra14-section .fra14-section-value::after,
.cue-cue-r-onepart-one-ninth .fra14-section:first-child .fra14-section-value::after,
.cue-cue-r-onepart-all-nine .fra14-section .fra14-section-value::after { content: attr(data-reveal-text); }

.cue-cue-t3-thirty-two .scene-t3 .fra14-whole-pending,
.cue-cue-t4-forty-five .scene-t4 .fra14-whole-pending { display: none; }
.cue-cue-t3-thirty-two .scene-t3 .fra14-whole-result,
.cue-cue-t3-divide .scene-t3 .fra14-whole-result,
.cue-cue-t3-multiply .scene-t3 .fra14-whole-result,
.cue-cue-t4-forty-five .scene-t4 .fra14-whole-result,
.cue-cue-t4-check .scene-t4 .fra14-whole-result { display: block !important; }
.cue-cue-t3-thirty-two .scene-t3 .fra14-whole-result::after,
.cue-cue-t3-divide .scene-t3 .fra14-whole-result::after,
.cue-cue-t3-multiply .scene-t3 .fra14-whole-result::after,
.cue-cue-t4-forty-five .scene-t4 .fra14-whole-result::after,
.cue-cue-t4-check .scene-t4 .fra14-whole-result::after { content: attr(data-reveal-text); }
.cue-cue-t3-divide .scene-t3 .fra14-whole-pending,
.cue-cue-t3-multiply .scene-t3 .fra14-whole-pending,
.cue-cue-t4-check .scene-t4 .fra14-whole-pending { display: none; }
.cue-cue-t3-thirty-two .scene-t3 .fra14-finish { opacity: 1; }

.cue-cue-t3-multiply .scene-t3 .fra14-work-step.step-whole,
.cue-cue-r-roles-multiply .fra14-work-step.step-whole {
  border-color: #2c8059;
  box-shadow: 0 0 0 4px rgb(44 128 89 / .18);
}

.cue-cue-t4-check .fra14-forward-check {
  border-color: #8b6b22;
  box-shadow: 0 0 0 4px rgb(139 107 34 / .17);
}

.cue-cue-t2-divide-three .scene-t2 .fra14-work-step.step-one strong::after,
.cue-cue-t2-eight .scene-t2 .fra14-work-step.step-one strong::after,
.cue-cue-t2-numerator-divisor .scene-t2 .fra14-work-step.step-one strong::after,
.cue-cue-t3-thirty-two .scene-t3 .fra14-work-step.step-whole strong::after,
.cue-cue-t3-divide .scene-t3 .fra14-work-step.step-whole strong::after,
.cue-cue-t3-multiply .scene-t3 .fra14-work-step.step-whole strong::after,
.cue-cue-t4-five-parts .scene-t4 .fra14-work-step.step-whole strong::after,
.cue-cue-t4-forty-five .scene-t4 .fra14-work-step.step-whole strong::after,
.cue-cue-t4-check .scene-t4 .fra14-work-step.step-whole strong::after,
.cue-cue-t4-check .scene-t4 .fra14-forward-check strong::after,
.cue-cue-r-roles-divide .fra14-work-step.step-one strong::after,
.cue-cue-r-roles-multiply .fra14-work-step strong::after,
.cue-cue-r-scale-split .fra14-work-step.step-one strong::after,
.cue-cue-r-scale-build .fra14-work-step strong::after,
.cue-cue-r-onepart-one-ninth .fra14-work-step.step-one strong::after,
.cue-cue-r-onepart-all-nine .fra14-work-step strong::after { content: attr(data-reveal-text); }

.cue-cue-r-part-bracket .fra14-known-bracket,
.cue-cue-r-part-whole .fra14-whole-bracket {
  color: #176f9f;
  filter: drop-shadow(0 2px 2px rgb(23 111 159 / .22));
}

@media (max-width: 520px) {
  .fra14-bar-card { padding: 1rem .72rem .85rem; gap: .48rem; }
  .fra14-bar { min-height: 5.4rem; }
  .fra14-known-bracket,
  .fra14-whole-bracket { font-size: .72rem; }
  .fra14-section-value { padding: .2rem .16rem; font-size: .66rem; }
  .fra14-working,
  .choice-and-integer-fields { grid-template-columns: 1fr; }
  .fra14-method-card { grid-template-columns: 1fr; }
  .fra14-method-card b { transform: rotate(90deg); }
  .choice-and-integer-answer .choice-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fra14-section,
  .fra14-section-value { transition: none !important; animation: none !important; }
}

/* FRA-10: simplest-form visual and interaction language. */
.fra10-context-visual {
  width: min(100%, 52rem);
  margin-inline: auto;
}

.fra10-visual {
  --fra10-navy: #182747;
  --fra10-blue: #4f7fd4;
  --fra10-teal: #55a39d;
  --fra10-amber: #dfa23a;
  --fra10-rose: #cc6b6f;
  --fra10-paper: #fffdf8;
  color: var(--fra10-navy);
}

.fra10-fraction,
.fra10-blank-fraction {
  display: inline-grid;
  grid-template-rows: 1fr .12rem 1fr;
  min-width: 3.2rem;
  place-items: center;
  vertical-align: middle;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1;
}

.fra10-fraction i,
.fra10-blank-fraction i {
  width: 100%;
  height: .12rem;
  border-radius: 999px;
  background: currentColor;
}

.fra10-fraction.result { color: #176f66; }

.fra10-arrow {
  display: inline-grid;
  min-width: 4.4rem;
  place-items: center;
  gap: .15rem;
  color: #52637d;
  font-size: 1.55rem;
  font-weight: 900;
}

.fra10-arrow small {
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.fra10-factor-chip {
  display: inline-grid;
  min-width: 4.2rem;
  min-height: 4.2rem;
  place-items: center;
  padding: .45rem;
  border: 2px solid #b17215;
  border-radius: 50%;
  background: #fff4d8;
  color: #765016;
}

.fra10-factor-chip small { font-size: .6rem; text-transform: uppercase; }
.fra10-factor-chip b { font-size: 1.2rem; }

.fra10-conflict,
.fra10-transform-row,
.fra10-hcf-route,
.fra10-question-source,
.fra10-question-transform,
.fra10-repair-chain,
.fra10-try-factor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(.65rem, 2.5vw, 1.4rem);
}

.fra10-conflict,
.fra10-bar-scene,
.fra10-comparison,
.fra10-hcf-route,
.fra10-branches,
.fra10-improper,
.fra10-transition,
.fra10-ticket-visual,
.fra10-factor-rows,
.fra10-question-source,
.fra10-question-transform,
.fra10-reasoning,
.fra10-statement,
.fra10-repair-chain,
.fra10-repair-contrast,
.fra10-try-factor {
  min-height: 11rem;
  padding: clamp(.85rem, 3vw, 1.5rem);
  border: 1px solid #cad3e0;
  border-radius: 1rem;
  background: linear-gradient(145deg, #fff 0%, var(--fra10-paper) 100%);
  box-shadow: 0 .45rem 1.2rem rgb(24 39 71 / .08);
}

.fra10-source-card,
.fra10-answer-card {
  display: grid;
  min-width: 7rem;
  place-items: center;
  gap: .55rem;
  padding: .8rem;
  border: 2px solid #aebbd0;
  border-radius: .85rem;
  background: #fff;
}

.fra10-answer-cards { display: flex; flex-wrap: wrap; gap: .7rem; }
.fra10-answer-card.answer-a { border-color: var(--fra10-amber); }
.fra10-answer-card.answer-b { border-color: var(--fra10-teal); }
.fra10-source-card small,
.fra10-answer-card small,
.fra10-comparison small,
.fra10-improper small,
.fra10-branches small,
.fra10-repair-contrast small {
  color: #5b6980;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fra10-factor-state,
.fra10-finished-badge,
.fra10-boundary-badge {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: #e1f2ee;
  color: #176f66;
  font-size: .76rem;
  font-weight: 900;
}

.fra10-boundary-badge { background: #fff0d0; color: #765016; }

.fra10-bar-scene { display: grid; gap: 1rem; }
.fra10-bar-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  min-height: 3.4rem;
  overflow: hidden;
  border: 3px solid var(--fra10-navy);
  border-radius: .45rem;
}

.fra10-bar-row.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fra10-bar-row i { border-inline-end: 1px solid var(--fra10-navy); background: #f1f4f8; }
.fra10-bar-row i:last-child { border-inline-end: 0; }
.fra10-bar-row i.selected { background: #83bdb7; }
.fra10-bar-row.nine i.group-start:not(:first-child) { border-inline-start: 3px solid var(--fra10-navy); }

.fra10-comparison,
.fra10-improper,
.fra10-repair-contrast {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.fra10-comparison > section,
.fra10-improper > section,
.fra10-repair-contrast > section {
  display: grid;
  place-items: center;
  gap: .7rem;
  padding: 1rem;
  border: 2px solid #b8c5d6;
  border-radius: .8rem;
  background: #fff;
  text-align: center;
}

.fra10-comparison .not-finished,
.fra10-repair-contrast .invalid { border-color: var(--fra10-rose); background: #fff7f7; }
.fra10-comparison .already,
.fra10-repair-contrast .valid { border-color: var(--fra10-teal); background: #f4fbf9; }

.fra10-factor-row { display: grid; gap: .35rem; width: 100%; }
.fra10-factor-row > div { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.fra10-factor-row span {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid #bac5d3;
  border-radius: 50%;
  background: #fff;
  font-size: .75rem;
  font-weight: 850;
}
.fra10-factor-row span.shared { border-color: var(--fra10-amber); background: #fff2ca; }

.fra10-hcf-route { position: relative; }
.fra10-division-pair { display: grid; gap: .35rem; width: 100%; text-align: center; font-weight: 850; }

.fra10-branches { display: grid; gap: .9rem; text-align: center; }
.fra10-branch-source { display: grid; place-items: center; }
.fra10-branch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.fra10-branch-grid section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem;
  border: 2px solid #b5c3d4;
  border-radius: .8rem;
  background: #fff;
}
.fra10-branch-grid .direct { border-color: var(--fra10-teal); }

.fra10-transition { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; text-align: center; }
.fra10-transition > span { padding: .8rem; border-radius: .75rem; background: #e8edf5; font-weight: 900; }
.fra10-transition > span.active { background: #d9efeb; color: #176f66; }
.fra10-plan { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.fra10-plan i { display: inline-grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: var(--fra10-navy); color: #fff; font-style: normal; }

.fra10-ticket-visual { display: grid; gap: .85rem; text-align: center; }
.fra10-ticket-grid { display: grid; grid-template-columns: repeat(10, minmax(1.5rem, 1fr)); gap: .35rem; }
.fra10-ticket-grid i {
  display: grid;
  min-height: 2rem;
  place-items: center;
  border: 1px solid #aab7ca;
  border-radius: .3rem;
  background: #f2f4f8;
  color: #6d788b;
  font-style: normal;
  font-size: .65rem;
}
.fra10-ticket-grid i.selected { border-color: #2a8179; background: #73b7b0; color: #102f31; }

.fra10-factor-rows { display: grid; place-items: center; gap: .8rem; }
.fra10-fraction-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.fra10-fraction-options section { display: grid; place-items: center; gap: .4rem; padding: .75rem; border: 2px solid #bac6d6; border-radius: .75rem; background: #fff; }
.fra10-fraction-options section.correct { border-color: var(--fra10-teal); background: #eef9f6; }

.fra10-reasoning,
.fra10-statement { display: grid; place-items: center; gap: .8rem; text-align: center; }
.fra10-reasoning > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; }
.fra10-question-source.route { display: grid; text-align: center; }
.fra10-blank-fraction { color: #8c96a8; }

.fra10-factor-cards { display: flex; flex-wrap: wrap; gap: .55rem; }
.fra10-factor-cards span {
  display: grid;
  width: 3.3rem;
  height: 3.3rem;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: .65rem;
  font-size: 1.15rem;
  font-weight: 900;
}
.fra10-factor-cards .invalid { color: #a04449; background: #fff2f2; }
.fra10-factor-cards .valid { color: #176f66; background: #eef9f6; }

.fra10-worked { display: grid; gap: .5rem; width: min(100%, 34rem); margin: .9rem auto 0; padding: 0; list-style: none; }
.fra10-worked li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: .65rem;
  padding: .6rem .7rem;
  border: 1px solid #b9c7d7;
  border-radius: .65rem;
  background: #fff;
  animation: fra10-step-in .28s ease-out both;
  animation-delay: calc(var(--fra10-step) * 110ms);
}
.fra10-worked li > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--fra10-navy); color: #fff; font-weight: 900; }
.fra10-worked p { margin: 0; }

.fra10-factor-route,
.fra10-compound,
.fra10-sort,
.fra10-arithmetic {
  display: grid;
  gap: .9rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid #b9c6d7;
  border-radius: .85rem;
  background: #fbfcfe;
}

.fra10-factor-route legend,
.fra10-compound legend,
.fra10-sort legend,
.fra10-arithmetic legend { padding-inline: .35rem; font-weight: 900; }

.fra10-route-current {
  display: inline-grid;
  grid-template-rows: 1fr .14rem 1fr;
  width: 4rem;
  place-items: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: 900;
}
.fra10-route-current i { width: 100%; height: .14rem; border-radius: 1rem; background: currentColor; }
.fra10-route-history { display: grid; gap: .3rem; margin: 0; padding-inline-start: 1.5rem; }
.fra10-factor-route label { display: grid; gap: .35rem; font-weight: 800; }
.fra10-factor-route input,
.fra10-sort input,
.fra10-sort select,
.fra10-arithmetic input { min-height: 2.75rem; border: 1px solid #91a0b5; border-radius: .55rem; padding: .45rem .6rem; font: inherit; }

.fra10-route-actions,
.fra10-decision,
.fra10-factor-options { display: flex; flex-wrap: wrap; gap: .55rem; }
.fra10-route-actions button,
.fra10-decision button,
.fra10-factor-options button {
  min-height: 2.75rem;
  padding: .55rem .85rem;
  border: 2px solid #687a96;
  border-radius: .65rem;
  background: #fff;
  color: var(--fra10-navy);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.fra10-route-actions button:hover,
.fra10-decision button:hover,
.fra10-factor-options button:hover,
.fra10-route-actions button:focus-visible,
.fra10-decision button:focus-visible,
.fra10-factor-options button:focus-visible { border-color: var(--fra10-blue); box-shadow: 0 0 0 3px rgb(79 127 212 / .22); }
.fra10-decision button.is-selected,
.fra10-factor-options button.is-selected { border-color: #267c73; background: #dff2ee; }
.fra10-inline-status { min-height: 1.5rem; margin: 0; color: #5b6679; }

.fra10-sort-row { display: grid; grid-template-columns: minmax(4rem, .55fr) 1.4fr 1fr; gap: .65rem; align-items: end; padding: .7rem; border: 1px solid #c5cfdd; border-radius: .65rem; background: #fff; }
.fra10-sort-row label,
.fra10-arithmetic label { display: grid; gap: .3rem; font-weight: 800; }
.fra10-arithmetic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fra10-arithmetic legend { grid-column: 1 / -1; }

.fra10-visual[data-fra10-cue] .fra10-factor-chip,
.fra10-visual[data-fra10-cue] .fra10-fraction.result,
.fra10-visual[data-fra10-cue] .fra10-finished-badge {
  box-shadow: 0 0 0 4px rgb(85 163 157 / .22);
}

/* Speech-led reveal states accumulate as exact canonical cues fire. */
.fra10-visual[data-kind="simplification_conflict_cards"] .fra10-factor-state,
.fra10-visual[data-kind="simplification_conflict_cards"] .answer-b > strong,
.fra10-visual[data-kind="grouped_fraction_bar_with_factor_check"] .fra10-factor-chip,
.fra10-visual[data-kind="grouped_fraction_bar_with_factor_check"] .fra10-fraction.result,
.fra10-visual[data-kind="grouped_fraction_bar_with_factor_check"] .fra10-bar-row.thirds,
.fra10-visual[data-kind="grouped_fraction_bar_with_factor_check"] .fra10-finished-badge,
.fra10-visual[data-kind="paired_factor_list_comparison"] .fra10-factor-row,
.fra10-visual[data-kind="paired_factor_list_comparison"] section > div,
.fra10-visual[data-kind="paired_factor_list_comparison"] section > strong,
.fra10-visual[data-kind="one_step_hcf_route"] .fra10-factor-chip,
.fra10-visual[data-kind="one_step_hcf_route"] .fra10-fraction.result,
.fra10-visual[data-kind="one_step_hcf_route"] .fra10-division-pair,
.fra10-visual[data-kind="one_step_hcf_route"] .fra10-finished-badge,
.fra10-visual[data-kind="branching_factor_routes"] .fra10-branch-grid,
.fra10-visual[data-kind="branching_factor_routes"] > strong,
.fra10-visual[data-kind="improper_fraction_boundary_pair"] .fra10-arrow,
.fra10-visual[data-kind="improper_fraction_boundary_pair"] .fra10-fraction.result,
.fra10-visual[data-kind="improper_fraction_boundary_pair"] .fra10-boundary-badge,
.fra10-visual[data-kind="improper_fraction_boundary_pair"] section > strong,
.fra10-visual[data-kind="stage_transition"] .fra10-plan {
  opacity: 0;
  visibility: hidden;
}

.fra10-visual.fra10-cue-hook-cue-3 .answer-a .fra10-factor-state,
.fra10-visual.fra10-cue-hook-cue-4 .answer-b .fra10-factor-state,
.fra10-visual.fra10-cue-hook-cue-5 .answer-b > strong,
.fra10-visual.fra10-cue-t1-cue-1 .fra10-factor-chip,
.fra10-visual.fra10-cue-t1-cue-3 .fra10-fraction.result,
.fra10-visual.fra10-cue-t1-cue-3 .fra10-bar-row.thirds,
.fra10-visual.fra10-cue-t1-cue-4 .fra10-finished-badge,
.fra10-visual.fra10-cue-t2-cue-2 .not-finished .fra10-factor-row,
.fra10-visual.fra10-cue-t2-cue-2 .not-finished > div,
.fra10-visual.fra10-cue-t2-cue-3 .already .fra10-factor-row,
.fra10-visual.fra10-cue-t2-cue-3 .already > strong,
.fra10-visual.fra10-cue-t3-cue-2 .fra10-factor-chip,
.fra10-visual.fra10-cue-t3-cue-3 .fra10-division-pair,
.fra10-visual.fra10-cue-t3-cue-4 .fra10-fraction.result,
.fra10-visual.fra10-cue-t3-cue-5 .fra10-finished-badge,
.fra10-visual.fra10-cue-t4-cue-1 .fra10-branch-grid,
.fra10-visual.fra10-cue-t4-cue-4 > strong,
.fra10-visual.fra10-cue-t5-cue-2 .fra10-arrow,
.fra10-visual.fra10-cue-t5-cue-2 .fra10-fraction.result,
.fra10-visual.fra10-cue-t5-cue-3 .fra10-boundary-badge,
.fra10-visual.fra10-cue-t5-cue-4 section > strong,
.fra10-visual.fra10-cue-handoff-cue-1 .fra10-plan {
  opacity: 1;
  visibility: visible;
}

@keyframes fra10-step-in {
  from { opacity: 0; transform: translateY(.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .fra10-comparison,
  .fra10-improper,
  .fra10-repair-contrast,
  .fra10-branch-grid,
  .fra10-sort-row,
  .fra10-arithmetic { grid-template-columns: 1fr; }
  .fra10-fraction-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fra10-ticket-grid { grid-template-columns: repeat(6, minmax(1.4rem, 1fr)); }
  .fra10-transition { grid-template-columns: 1fr; }
  .fra10-transition > .fra10-arrow { transform: rotate(90deg); }
  .fra10-plan { grid-column: 1; }
  .fra10-sort-row label { width: 100%; }
}

@media (max-width: 420px) {
  .fra10-ticket-grid { grid-template-columns: repeat(5, minmax(1.25rem, 1fr)); }
  .fra10-route-actions,
  .fra10-route-actions button,
  .fra10-decision button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fra10-visual *,
  .fra10-worked li { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* FRA-22 owner-authorised unlike-denominator subtraction runtime */
.fra22-context-visual { width: 100%; }
.fra22-visual { width: min(100%, 58rem); margin: 0 auto; color: #17324d; }
.fra22-scene,
.fra22-question-visual,
.fra22-repair-card { min-height: 19rem; display: grid; align-content: center; gap: 1.15rem; }
.fra22-fraction { display: inline-grid; grid-template-rows: auto .12rem auto; min-width: 2.3rem; text-align: center; vertical-align: middle; margin: 0 .15rem; font-variant-numeric: tabular-nums; }
.fra22-fraction > i { display: block; width: 100%; height: .12rem; background: currentColor; border-radius: 9px; }
.fra22-fraction > b { line-height: 1.05; font-size: 1.08em; }
.fra22-battery { display: grid; grid-template-columns: 1fr .5rem; align-items: center; width: 100%; min-width: 10rem; }
.fra22-battery-body { display: grid; grid-template-columns: repeat(var(--fra22-parts), minmax(.18rem, 1fr)); gap: .16rem; min-height: 3.25rem; padding: .32rem; border: .18rem solid #28445f; border-radius: .65rem; background: #f6fbff; box-shadow: inset 0 0 0 .08rem rgba(23, 50, 77, .08); }
.fra22-battery > b { width: .5rem; height: 1.55rem; border-radius: 0 .3rem .3rem 0; background: #28445f; }
.fra22-battery-body > i { display: block; min-width: 0; border-radius: .25rem; background: #e7eef4; border: 1px solid #cedbe6; transition: background .25s ease, opacity .25s ease, transform .25s ease; }
.fra22-battery-body > i.is-selected { background: linear-gradient(180deg, #54c7d5, #1d9eb4); border-color: #147f93; }
.fra22-battery-body > i.is-removed { background: repeating-linear-gradient(135deg, #f5c3ba 0 .28rem, #fff2ef .28rem .52rem); border-color: #c94f3d; opacity: .78; }
.fra22-labelled-bar { display: grid; grid-template-columns: 9rem minmax(11rem, 1fr) 3.2rem; align-items: center; gap: 1rem; }
.fra22-labelled-bar > strong { font-size: .9rem; color: #49647d; }
.fra22-hook { grid-template-columns: minmax(15rem, 1.2fr) minmax(14rem, 1fr); align-items: center; }
.fra22-hook-start { display: grid; grid-template-columns: 1fr 3.2rem; gap: .75rem; align-items: center; }
.fra22-chip { grid-column: 1 / -1; justify-self: start; padding: .35rem .7rem; border-radius: 99px; background: #dff5f6; color: #117b88; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.fra22-quarter-use { grid-column: 1; display: grid; grid-template-columns: 1fr; justify-items: center; color: #865c06; }
.fra22-quarter-use > i { width: 25%; height: .9rem; border: .18rem solid #d89a1d; border-top: 0; }
.fra22-quarter-use > b { font-size: .8rem; }
.fra22-wrong-method { position: relative; display: grid; justify-items: center; gap: .65rem; padding: 1.25rem; border: .12rem dashed #d98373; border-radius: 1rem; background: #fff8f6; }
.fra22-wrong-method > div:first-of-type { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; }
.fra22-impossible-batteries { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; width: 100%; }
.fra22-wrong-method > em { position: absolute; inset: 40% 6% auto; color: #b13c2c; font-size: 2rem; font-weight: 900; text-transform: uppercase; transform: rotate(-7deg); opacity: 0; }
.fra22-hook .battery-sixths .is-selected { background: #e7eef4; border-color: #cedbe6; }
.fra22-quarter-use,
.fra22-wrong-method { opacity: 0; visibility: hidden; transform: translateY(.35rem); transition: opacity .25s ease, transform .25s ease; }
.cue-hook-cue-start .fra22-hook .battery-sixths .is-selected { background: linear-gradient(180deg, #54c7d5, #1d9eb4); border-color: #147f93; }
.cue-hook-cue-remove .fra22-quarter-use,
.cue-hook-cue-wrong .fra22-wrong-method { opacity: 1; visibility: visible; transform: none; }
.cue-hook-cue-cross .fra22-wrong-method > em { opacity: .94; }
.fra22-pieces { padding: 0 1rem; }
.fra22-shared-target { display: grid; grid-template-columns: 1fr auto 1fr; gap: .85rem; align-items: center; opacity: 0; }
.fra22-shared-target i { height: .12rem; background: #d89a1d; }
.cue-t1-cue-sixths .fra22-sixths-row .fra22-battery-body,
.cue-t1-cue-quarters .fra22-quarters-row .fra22-battery-body { box-shadow: 0 0 0 .35rem rgba(44, 178, 193, .2); }
.cue-t1-cue-shared .fra22-shared-target { opacity: 1; }
.fra22-multiples { grid-template-columns: 1fr; position: relative; }
.fra22-multiple-track { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: center; }
.fra22-multiple-track > div { display: grid; grid-template-columns: repeat(6, minmax(2rem, 1fr)); align-items: center; gap: .45rem; }
.fra22-multiple-track span { display: grid; place-items: center; aspect-ratio: 1; max-width: 3rem; border: .12rem solid #b9cbd8; border-radius: 50%; background: #f8fbfd; opacity: .28; }
.fra22-meeting-line { position: absolute; left: calc(8rem + 1rem + 20%); top: 4.25rem; width: .16rem; height: 5rem; background: #d89a1d; opacity: 0; }
.fra22-common-label { justify-self: center; padding: .4rem .75rem; border-radius: .45rem; background: #fff0c8; color: #805707; opacity: 0; }
.cue-t2-cue-multiples .fra22-multiple-track span { opacity: 1; }
.cue-t2-cue-meet .fra22-multiple-track span.is-meeting { border-color: #d89a1d; background: #fff0c8; transform: scale(1.08); }
.cue-t2-cue-meet .fra22-meeting-line,
.cue-t2-cue-label .fra22-common-label { opacity: 1; }
.fra22-rename-row { display: grid; grid-template-columns: minmax(15rem, 1fr) auto minmax(15rem, 1fr); align-items: center; gap: .8rem; }
.fra22-rename-row > .fra22-labelled-bar { grid-template-columns: 1fr; gap: .35rem; }
.fra22-rename-row > .fra22-labelled-bar > strong { display: none; }
.fra22-rename-row > strong { grid-column: 1 / -1; justify-self: center; }
.fra22-rename-row .target-bar,
.fra22-factor-note { opacity: 0; }
.fra22-factor-note { justify-self: center; padding: .4rem .8rem; border-radius: 99px; background: #dff5f6; color: #117b88; font-weight: 800; }
.cue-t3-cue-sixths-split .sixths-to-twelfths .target-bar,
.cue-t3-cue-quarters-split .quarters-to-twelfths .target-bar,
.cue-t3-cue-factors .fra22-factor-note { opacity: 1; }
.fra22-remove { justify-items: center; }
.fra22-remove > .fra22-battery { width: min(100%, 42rem); }
.fra22-order-line,
.fra22-result-line { display: flex; align-items: center; gap: .55rem; font-size: 1.2rem; }
.fra22-order-line > i { width: 4rem; height: .7rem; border-bottom: .15rem solid #d89a1d; border-right: .15rem solid #d89a1d; transform: skewX(-35deg); opacity: 0; }
.fra22-remove .is-removed,
.fra22-result-line .after-count,
.fra22-remove > p { opacity: 0; }
.cue-t4-cue-order .fra22-order-line > i,
.cue-t4-cue-remove .fra22-remove .is-removed,
.cue-t4-cue-result .fra22-result-line .after-count,
.cue-t4-cue-denominator .fra22-remove > p { opacity: 1; }
.fra22-two-routes { grid-template-columns: 1fr 1fr; align-items: stretch; }
.fra22-route-card { display: grid; align-content: center; gap: .7rem; padding: 1rem; border: .12rem solid #b9d0dd; border-radius: 1rem; background: #f8fcfd; }
.fra22-route-card > span { font-weight: 800; color: #49647d; }
.fra22-route-card > div:last-child { display: flex; justify-content: center; align-items: center; gap: .25rem; }
.route-twenty-four,
.fra22-equivalence-link { opacity: 0; }
.fra22-equivalence-link { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: .5rem; align-items: center; justify-self: center; }
.fra22-equivalence-link > i { width: 4rem; height: .12rem; background: #d89a1d; }
.cue-t5-cue-alternate .route-twenty-four,
.cue-t5-cue-same-amount .fra22-equivalence-link { opacity: 1; }
.fra22-handoff { grid-template-columns: repeat(7, auto); align-items: center; justify-content: center; }
.fra22-handoff > div { display: grid; justify-items: center; gap: .55rem; max-width: 8.5rem; text-align: center; }
.fra22-handoff > div span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #1b9bb0; color: white; font-weight: 900; }
.fra22-expression { justify-self: center; padding: 1rem 1.5rem; border-radius: 1rem; background: #f2f8fb; font-size: clamp(1.45rem, 5vw, 2.25rem); font-weight: 800; }
.fra22-question-visual { justify-items: center; }
.fra22-method-preview { display: grid; grid-template-columns: repeat(2, minmax(12rem, 1fr)); gap: .7rem; width: 100%; }
.fra22-method-preview span { padding: .65rem; border: 1px solid #c9dae5; border-radius: .65rem; background: white; text-align: center; }
.fra22-fixed-working { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; }
.fra22-worked-steps { display: grid; gap: .5rem; width: min(100%, 38rem); margin: .3rem auto 0; padding: 1rem 1rem 1rem 2.7rem; border-radius: .8rem; background: #eef8f4; text-align: left; }
.fra22-worked-steps li { padding-left: .25rem; animation: fra22-step-in .28s ease both; }
.fra22-worked-steps li:nth-child(2) { animation-delay: .08s; }
.fra22-worked-steps li:nth-child(3) { animation-delay: .16s; }
.fra22-worked-steps li:nth-child(4) { animation-delay: .24s; }
.fra22-context-object { display: grid; grid-template-columns: auto auto; gap: 1.2rem; align-items: center; }
.fra22-tank { position: relative; display: grid; place-items: end center; width: 8rem; height: 11rem; overflow: hidden; border: .22rem solid #31516c; border-radius: 1.25rem 1.25rem .7rem .7rem; background: #f7fbfd; }
.fra22-tank > i { position: absolute; inset: auto 0 0; height: calc(var(--fill) * 100%); background: linear-gradient(#5ccbd7, #1596ae); }
.fra22-tank > span { position: relative; z-index: 1; margin-bottom: .7rem; padding: .25rem .45rem; border-radius: .35rem; background: rgba(255,255,255,.88); font-weight: 800; }
.fra22-reel { display: grid; place-items: center; width: 10rem; height: 10rem; border: 1.1rem solid #65b7c4; border-radius: 50%; box-shadow: inset 0 0 0 1.4rem #d8edf1; }
.fra22-reel i { width: 2rem; height: 2rem; border-radius: 50%; background: #31516c; }
.fra22-reel b { margin-top: 7.2rem; position: absolute; }
.fra22-cut { padding: .55rem .85rem; border: .12rem dashed #d48625; border-radius: .6rem; color: #7d5405; font-weight: 800; }
.fra22-repair-card { justify-items: center; padding: 1.4rem; border: .14rem solid #98c9d1; border-radius: 1rem; background: linear-gradient(155deg, #f7fcfd, #eef8f5); }
.fra22-repair-card > span { font-size: .76rem; letter-spacing: .12em; font-weight: 900; color: #117b88; }
.fra22-repair-card h2 { margin: 0; text-align: center; }
.fra22-repair-card > strong { padding: .65rem 1rem; border-radius: .55rem; background: white; font-size: 1.4rem; }
.fra22-repair-card ol { display: grid; gap: .55rem; margin: 0; padding-left: 1.7rem; }
@keyframes fra22-step-in { from { opacity: 0; transform: translateY(.3rem); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
  .fra22-hook,
  .fra22-two-routes { grid-template-columns: 1fr; }
  .fra22-wrong-method { grid-column: 1; }
  .fra22-labelled-bar { grid-template-columns: 1fr 3.1rem; }
  .fra22-labelled-bar > strong { grid-column: 1 / -1; }
  .fra22-rename-row { grid-template-columns: 1fr; }
  .fra22-rename-row > b { justify-self: center; }
  .fra22-method-preview { grid-template-columns: 1fr; }
  .fra22-handoff { grid-template-columns: 1fr; gap: .45rem; }
  .fra22-handoff > b { transform: rotate(90deg); }
  .fra22-multiple-track { grid-template-columns: 1fr; }
  .fra22-multiple-track > div { grid-template-columns: repeat(6, minmax(1.8rem, 1fr)); }
  .fra22-meeting-line { display: none; }
}

@media (max-width: 420px) {
  .fra22-scene,
  .fra22-question-visual,
  .fra22-repair-card { min-height: 15rem; gap: .75rem; }
  .fra22-battery-body { min-height: 2.5rem; gap: .09rem; }
  .fra22-multiple-track > div { gap: .18rem; }
  .fra22-multiple-track span { font-size: .78rem; }
  .fra22-context-object { grid-template-columns: 1fr; justify-items: center; }
  .fra22-expression { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fra22-visual *,
  .fra22-worked-steps li { animation: none !important; transition: none !important; }
}

/* FRA-21 owner-approved subtraction lesson */
.fra21-context-visual,
.fra21-visual { width: 100%; }
.fra21-visual { display: grid; place-items: center; min-height: 19rem; padding: clamp(.5rem, 2vw, 1.25rem); }
.fra21-visual > * { width: min(100%, 46rem); }
.fra21-fraction { display: inline-grid; grid-template-rows: auto .12rem auto; min-width: 2.8rem; place-items: center; vertical-align: middle; color: #243650; font-size: clamp(1.2rem, 3vw, 2rem); line-height: 1; }
.fra21-fraction > i { width: 100%; height: .12rem; background: currentColor; }
.fra21-fraction.is-ready { color: #0c927d; }
.fra21-fraction.is-converted { color: #7350d7; }
.fra21-fraction.is-result { color: #21865c; }
.fra21-strip { display: grid; grid-template-columns: repeat(var(--fra21-parts), minmax(0, 1fr)); width: 100%; min-height: 4.25rem; overflow: hidden; border: .16rem solid #263b59; border-radius: .65rem; background: #fff; }
.fra21-strip > i { position: relative; border-right: .08rem solid #718097; background: #fff; }
.fra21-strip > i:last-child { border-right: 0; }
.fra21-strip > i.is-filled { background: #f4ad27; }
.fra21-strip > i.is-removed { background: #f9d7d5; }
.fra21-strip > i.is-removed::before,
.fra21-strip > i.is-removed::after { content: ""; position: absolute; top: 50%; left: 8%; width: 84%; height: .12rem; background: #d34f56; transform: rotate(35deg); }
.fra21-strip > i.is-removed::after { transform: rotate(-35deg); }
.fra21-equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(.55rem, 2vw, 1.25rem); padding: .8rem; font-size: 1.55rem; }
.fra21-factor { padding: .35rem .55rem; border-radius: .4rem; background: #eee8ff; color: #6542c8; font-weight: 900; }
.fra21-hook { display: grid; grid-template-columns: minmax(16rem, 1fr) auto; gap: 1.4rem; align-items: center; }
.fra21-battery { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; padding: 1rem 1.25rem; border: .22rem solid #243650; border-radius: 1.2rem; background: #fbfcfe; }
.fra21-battery-cap { position: absolute; right: -.65rem; width: .55rem; height: 38%; border-radius: 0 .35rem .35rem 0; background: #243650; }
.fra21-battery-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .18rem; height: 6rem; padding: .3rem; border-radius: .55rem; background: #e9eef4; }
.fra21-battery-grid > i { border-radius: .22rem; background: #fff; }
.fra21-battery-grid > i.is-filled { background: #f5aa1d; }
.fra21-update { display: grid; justify-items: center; gap: .45rem; min-width: 8rem; padding: 1rem; border: .12rem solid #e3a8aa; border-radius: 1rem; background: #fff4f3; }
.fra21-update small { color: #b84950; font-weight: 900; }
.fra21-quarter-piece { width: 5rem; height: 1.1rem; border: .13rem solid #b84950; border-radius: .3rem; background: #f8c1be; }
.fra21-mismatch { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; gap: .7rem; align-items: center; color: #c84f55; }
.fra21-mismatch i { height: .12rem; background: currentColor; }
.fra21-teach-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
.fra21-teach-compare > div { display: grid; gap: .65rem; justify-items: center; }
.fra21-teach-compare p { grid-column: 1 / -1; text-align: center; font-weight: 800; }
.fra21-remove-arrow { color: #cb535a; font-weight: 900; }
.fra21-conversion,
.fra21-removal,
.fra21-first-changes,
.fra21-missing-working,
.fra21-choice-problem,
.fra21-visual-bar,
.fra21-worked,
.fra21-repair-scale,
.fra21-repair-early,
.fra21-repair-order,
.fra21-repair-denom,
.fra21-repair-both { display: grid; gap: 1.15rem; justify-items: center; }
.fra21-ready-label,
.fra21-locked { padding: .38rem .7rem; border-radius: 999px; background: #dff6ef; color: #14745f; font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
.fra21-protected { display: grid; grid-template-columns: auto auto; gap: .7rem; align-items: center; padding: .7rem 1rem; border: .14rem solid #44a982; border-radius: .8rem; }
.fra21-protected small { color: #14745f; font-weight: 900; }
.fra21-convert-line { display: flex; align-items: center; gap: 1rem; }
.fra21-convert-line > span { display: grid; gap: .65rem; color: #7450d8; }
.fra21-quarter-to-eighths { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; width: 100%; align-items: center; }
.fra21-quarter-to-eighths .fra21-strip { min-height: 2.8rem; }
.fra21-order-line { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.fra21-order-line > b { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #e9f1ff; color: #2f72d8; }
.fra21-handoff { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .75rem; align-items: center; }
.fra21-handoff article { display: grid; justify-items: center; gap: .6rem; min-height: 8rem; align-content: center; padding: .8rem; border: .12rem solid #bfd0e2; border-radius: 1rem; background: #f7faff; text-align: center; }
.fra21-handoff article span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #367fe5; color: #fff; font-weight: 900; }
.fra21-handoff > i { width: 2.2rem; height: .12rem; background: #9db0c7; }
.fra21-timber { display: grid; gap: 1rem; justify-items: center; }
.fra21-timber-strip { width: 100%; }
.fra21-timber-strip .fra21-strip { min-height: 6rem; }
.fra21-bracket { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: start; width: 34%; }
.fra21-bracket i { height: .65rem; border-bottom: .12rem solid #6d4acb; }
.fra21-tank { display: grid; grid-template-columns: minmax(8rem, 13rem) auto; gap: 1.2rem; align-items: center; }
.fra21-tank-vessel { display: flex; flex-direction: column-reverse; min-height: 14rem; overflow: hidden; border: .22rem solid #243650; border-radius: 1.5rem .9rem .75rem .75rem; }
.fra21-tank-vessel > i { flex: 1; border-top: .07rem solid #66809b; background: #fff; }
.fra21-tank-vessel > i.is-filled { background: #f4ad27; }
.fra21-tank > div:last-child { display: grid; gap: .55rem; justify-items: center; }
.fra21-tank small { color: #5b6c83; font-weight: 900; }
.fra21-visual-bar { width: 100%; }
.fra21-visual-bar > div { display: flex; align-items: center; gap: .55rem; }
.fra21-worked ol { display: grid; gap: .55rem; width: min(100%, 36rem); margin: 0; padding: 1rem 1rem 1rem 2.4rem; border-radius: .8rem; background: #edf8f3; text-align: left; }
.fra21-worked li { padding-left: .3rem; }
.fra21-repair-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.fra21-repair-steps span { display: grid; place-items: center; min-height: 6rem; padding: .7rem; border: .12rem solid #bed0e3; border-radius: .8rem; background: #f5f9ff; text-align: center; font-weight: 800; }
.fra21-repair-steps span + span::before { content: "→"; position: absolute; margin-left: -2.05rem; color: #6d7f96; }
.two-step-answer input,
.choice-and-integer-answer input { min-width: 4.2rem; min-height: 3.4rem; }

/* FRA21 word-boundary cue states. Cues accumulate on .math-canvas as Ryan reaches each approved anchor. */
.fra21-hook .fra21-battery > .fra21-fraction,
.fra21-hook .fra21-update,
.fra21-hook .fra21-mismatch,
.fra21-teach-compare .fra21-remove-arrow,
.fra21-teach-compare .fra21-strip,
.fra21-teach-compare > p,
.fra21-conversion .fra21-ready-label,
.fra21-conversion .fra21-protected small,
.fra21-conversion .fra21-den-factor,
.fra21-conversion .fra21-num-factor,
.fra21-conversion .fra21-conversion-target,
.fra21-conversion .fra21-quarter-to-eighths,
.fra21-removal .fra21-t3-grids,
.fra21-removal .fra21-t3-removal,
.fra21-removal .fra21-t3-equation,
.fra21-removal .fra21-t3-fixed,
.fra21-first-changes .fra21-first-source,
.fra21-first-changes .fra21-t4-factors,
.fra21-first-changes .fra21-first-target,
.fra21-first-changes .fra21-t4-order,
.fra21-first-changes .fra21-t4-result { opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease; }
.fra21-conversion .fra21-protected { border-color: transparent; }
.cue-hook-c1 .fra21-hook .fra21-battery > .fra21-fraction,
.cue-hook-c2 .fra21-hook .fra21-update,
.cue-hook-c5 .fra21-hook .fra21-mismatch,
.cue-t1-c1 .fra21-teach-compare .fra21-remove-arrow,
.cue-t1-c2 .fra21-teach-compare .fra21-strip,
.cue-t1-c3 .fra21-teach-compare > p,
.cue-t2-c1 .fra21-conversion .fra21-ready-label,
.cue-t2-c2 .fra21-conversion .fra21-protected small,
.cue-t2-c3 .fra21-conversion .fra21-den-factor,
.cue-t2-c4 .fra21-conversion .fra21-num-factor,
.cue-t2-c5 .fra21-conversion .fra21-conversion-target,
.cue-t2-c5 .fra21-conversion .fra21-quarter-to-eighths,
.cue-t3-c1 .fra21-removal .fra21-t3-grids,
.cue-t3-c2 .fra21-removal .fra21-t3-removal,
.cue-t3-c3 .fra21-removal .fra21-t3-equation,
.cue-t3-c4 .fra21-removal .fra21-t3-fixed,
.cue-t4-c1 .fra21-first-changes .fra21-first-source,
.cue-t4-c2 .fra21-first-changes .fra21-t4-factors,
.cue-t4-c2 .fra21-first-changes .fra21-first-target,
.cue-t4-c3 .fra21-first-changes .fra21-t4-order,
.cue-t4-c4 .fra21-first-changes .fra21-t4-result { opacity: 1; visibility: visible; }
.cue-hook-c3 .fra21-battery .fra21-fraction > b:last-child,
.cue-hook-c4 .fra21-update .fra21-fraction > b:last-child { outline: .18rem solid #367fe5; outline-offset: .2rem; border-radius: .2rem; }
.cue-t2-c2 .fra21-conversion .fra21-protected { border-color: #44a982; }
.cue-hook-c1 .fra21-hook .fra21-battery-grid { animation: fra21-cue-pulse .55s ease both; }
.fra21-t3-grids { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; }
.fra21-t3-removal,
.fra21-t3-equation { width: 100%; }
.fra21-order-line .fra21-t4-order { display: flex; align-items: center; gap: .6rem; }
.fra21-order-line .fra21-t4-order > b { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #e9f1ff; color: #2f72d8; }
.math-canvas[data-active-cue^="r-both"] .fra21-repair-both,
.math-canvas[data-active-cue^="r-scale"] .fra21-repair-scale,
.math-canvas[data-active-cue^="r-early"] .fra21-repair-steps,
.math-canvas[data-active-cue^="r-order"] .fra21-repair-order,
.math-canvas[data-active-cue^="r-denom"] .fra21-repair-denom { animation: fra21-cue-pulse .55s ease both; }
@keyframes fra21-cue-pulse { 50% { filter: drop-shadow(0 0 .45rem rgb(54 127 229 / .36)); transform: scale(1.01); } }
.fra21-repair-scale > div,
.fra21-repair-early > div,
.fra21-repair-order > div,
.fra21-repair-denom > div,
.fra21-repair-both > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .65rem; }
.fra21-repair-c1,
.fra21-repair-c2,
.fra21-repair-c3 { opacity: 0; visibility: hidden; transition: opacity .22s ease; }
.cue-r-scale-c1 .fra21-repair-scale .fra21-repair-c1,
.cue-r-scale-c2 .fra21-repair-scale .fra21-repair-c2,
.cue-r-scale-c3 .fra21-repair-scale .fra21-repair-c3,
.cue-r-early-c1 .fra21-repair-early .fra21-repair-c1,
.cue-r-early-c2 .fra21-repair-early .fra21-repair-c2,
.cue-r-early-c3 .fra21-repair-early .fra21-repair-c3,
.cue-r-order-c1 .fra21-repair-order .fra21-repair-c1,
.cue-r-order-c2 .fra21-repair-order .fra21-repair-c2,
.cue-r-order-c3 .fra21-repair-order .fra21-repair-c3,
.cue-r-denom-c1 .fra21-repair-denom .fra21-repair-c1,
.cue-r-denom-c2 .fra21-repair-denom .fra21-repair-c2,
.cue-r-denom-c3 .fra21-repair-denom .fra21-repair-c3,
.cue-r-both-c1 .fra21-repair-both .fra21-repair-c1,
.cue-r-both-c2 .fra21-repair-both .fra21-repair-c2,
.cue-r-both-c3 .fra21-repair-both .fra21-repair-c3 { opacity: 1; visibility: visible; }
.fra21-scale-wrong { color: #b33f48; }
.fra21-scale-wrong b,
.fra21-denom-lock b { padding: .35rem .6rem; border-radius: .45rem; background: #fff0ef; color: #a53a43; }
.fra21-scale-arrows span { padding: .35rem .65rem; border-radius: 999px; background: #eee8ff; color: #6542c8; font-weight: 900; }
.fra21-unequal-pieces,
.fra21-tenths-pair { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; }
.fra21-unequal-pieces b { grid-column: 1 / -1; justify-self: center; color: #b33f48; }
.fra21-crossed-line { padding: .45rem .7rem; border-radius: .45rem; background: linear-gradient(165deg, transparent 46%, #c64e55 47% 53%, transparent 54%); font-size: 1.4rem; font-weight: 900; }
.fra21-start-frame { padding: .65rem .85rem; border: .15rem solid #44a982; border-radius: .75rem; }
.fra21-denom-lock s { color: #b33f48; font-weight: 900; }

@media (max-width: 700px) {
  .fra21-hook,
  .fra21-teach-compare,
  .fra21-tank { grid-template-columns: 1fr; }
  .fra21-t3-grids { grid-template-columns: 1fr; }
  .fra21-mismatch,
  .fra21-teach-compare p { grid-column: 1; }
  .fra21-remove-arrow { transform: rotate(90deg); justify-self: center; }
  .fra21-handoff { grid-template-columns: 1fr; }
  .fra21-handoff > i { width: .12rem; height: 1.5rem; justify-self: center; }
  .fra21-repair-steps { grid-template-columns: 1fr; }
  .fra21-repair-steps span + span::before { content: "↓"; position: static; display: block; margin: -1.3rem 0 -.2rem; }
}

@media (max-width: 420px) {
  .fra21-visual { min-height: 15rem; padding: .25rem; }
  .fra21-battery { grid-template-columns: 1fr; padding: .75rem; }
  .fra21-battery-grid { height: 4.4rem; }
  .fra21-equation { gap: .4rem; padding: .35rem; font-size: 1.1rem; }
  .fra21-fraction { min-width: 2.25rem; font-size: 1.15rem; }
  .fra21-convert-line { gap: .45rem; }
  .fra21-quarter-to-eighths { gap: .35rem; }
  .fra21-tank-vessel { min-height: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fra21-visual * { animation: none !important; transition: none !important; }
}

/* FRA24 owner-approved fraction-product lesson */
.fra24-context-visual { width: 100%; }
.fra24-visual {
  display: grid;
  place-items: center;
  width: min(100%, 50rem);
  min-height: 22rem;
  padding: 1rem;
  color: #18324d;
}
.fra24-visual > * { width: 100%; }
.fra24-fraction {
  display: inline-grid;
  grid-template-rows: auto .14rem auto;
  min-width: 3.2rem;
  place-items: center;
  font-size: 1.45rem;
  line-height: 1;
  vertical-align: middle;
}
.fra24-fraction i { width: 100%; height: .14rem; background: currentColor; border-radius: 999px; }
.fra24-fraction b { padding: .18rem .3rem; }
.fra24-expression,
.fra24-derived-result,
.fra24-hook-result,
.fra24-missing-visual,
.fra24-improper-products {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.fra24-operation { color: #63758b; font-size: 1.8rem; font-weight: 900; }
.fra24-map-scene,
.fra24-grid-symbolic,
.fra24-symbolic-rows,
.fra24-improper-scene,
.fra24-question-visual,
.fra24-question-grid,
.fra24-method-visual,
.fra24-missing-visual {
  display: grid;
  gap: 1rem;
  place-items: center;
}
.fra24-map-copy { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.fra24-map-copy > span {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 3.2rem;
  padding: .45rem .85rem;
  border: .12rem solid #b7c7d8;
  border-radius: .85rem;
  background: #f8fbff;
  color: #45637f;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.fra24-map-copy .fra24-fraction { min-width: 2.15rem; font-size: 1rem; }
.fra24-grid-wrap { display: grid; gap: .55rem; width: min(100%, 34rem); }
.fra24-grid {
  display: grid;
  grid-template-columns: repeat(var(--fra24-columns), minmax(1.9rem, 1fr));
  grid-template-rows: repeat(var(--fra24-rows), minmax(2.4rem, 1fr));
  width: 100%;
  min-height: 13rem;
  overflow: hidden;
  border: .2rem solid #233b55;
  border-radius: .7rem;
  background: #fff;
}
.fra24-cell {
  position: relative;
  min-width: 0;
  border-right: .08rem solid #526d89;
  border-bottom: .08rem solid #526d89;
  background: #fff;
  transition: background-color .32s ease, box-shadow .32s ease, opacity .32s ease;
}
.fra24-cell.is-first {
  background-color: #d6ebff;
  background-image: radial-gradient(circle at center, rgba(43, 111, 184, .38) 0 .16rem, transparent .18rem);
  background-size: 1rem 1rem;
}
.fra24-cell.is-second::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(235, 154, 45, .52) 0 .24rem, transparent .24rem .62rem);
  pointer-events: none;
}
.fra24-cell.is-overlap {
  box-shadow: inset 0 0 0 .14rem #7b3fc0;
  background-color: #e5d9f8;
  background-image: repeating-linear-gradient(45deg, rgba(99, 54, 160, .35) 0 .17rem, transparent .17rem .5rem), repeating-linear-gradient(-45deg, rgba(99, 54, 160, .24) 0 .17rem, transparent .17rem .5rem);
}
.fra24-cell.is-overlap::after { background: none; }
.fra24-cell.is-reference-edge { border-right: .24rem solid #213a55; }
.fra24-reference-brace {
  display: block;
  width: calc(var(--fra24-reference-ratio) * 100%);
  padding-top: .35rem;
  border-top: .16rem solid #284b70;
  color: #385a7c;
  text-align: center;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.fra24-grid-counts { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.fra24-grid-counts span,
.fra24-product-badge,
.fra24-no-common,
.fra24-row-reminder {
  padding: .38rem .68rem;
  border-radius: 999px;
  background: #edf4fb;
  color: #42617f;
  font-size: .78rem;
  font-weight: 900;
}
.fra24-hook-result,
.fra24-grid-counts,
.fra24-product-badge,
.fra24-derived-result,
.fra24-meaning-lines,
.fra24-no-common,
.fra24-improper-products { opacity: 0; transform: translateY(.35rem); transition: opacity .28s ease, transform .28s ease; }
.math-canvas.cue-hook-c3 .fra24-grid-counts,
.math-canvas.cue-hook-c4 .fra24-grid-counts,
.math-canvas.cue-hook-c5 .fra24-grid-counts,
.math-canvas.cue-hook-c6 .fra24-grid-counts,
.math-canvas.cue-t1-c1 .fra24-grid-counts,
.math-canvas.cue-t1-c2 .fra24-grid-counts { opacity: 1; transform: none; }
.math-canvas.cue-hook-c3 .fra24-grid.is-hook-reveal .fra24-cell,
.math-canvas.cue-hook-c4 .fra24-grid.is-hook-reveal .fra24-cell,
.math-canvas.cue-hook-c5 .fra24-grid.is-hook-reveal .fra24-cell,
.math-canvas.cue-hook-c6 .fra24-grid.is-hook-reveal .fra24-cell { border-bottom-color: #526d89; }
.math-canvas.cue-hook-c4 .fra24-grid.is-hook-reveal .fra24-cell.is-second::after,
.math-canvas.cue-hook-c5 .fra24-grid.is-hook-reveal .fra24-cell.is-second::after,
.math-canvas.cue-hook-c6 .fra24-grid.is-hook-reveal .fra24-cell.is-second::after { opacity: 1; }
.math-canvas.cue-hook-c6 .fra24-hook-result,
.math-canvas.cue-t1-c3 .fra24-product-badge,
.math-canvas.cue-t2-c1 .fra24-meaning-lines,
.math-canvas.cue-t2-c2 .fra24-meaning-lines,
.math-canvas.cue-t2-c3 .fra24-derived-result,
.math-canvas.cue-t2-c4 .fra24-derived-result,
.math-canvas.cue-t3-c3 .fra24-no-common,
.math-canvas.cue-t4-c2 .fra24-improper-products,
.math-canvas.cue-t4-c3 .fra24-improper-products { opacity: 1; transform: none; }
.fra24-grid.is-hook-reveal .fra24-cell { border-bottom-color: transparent; }
.fra24-grid.is-hook-reveal .fra24-cell.is-second::after { opacity: 0; }
.fra24-grid.is-hook-reveal .fra24-cell.is-overlap {
  box-shadow: none;
  background-color: #d6ebff;
  background-image: radial-gradient(circle at center, rgba(43, 111, 184, .38) 0 .16rem, transparent .18rem);
  background-size: 1rem 1rem;
}
.math-canvas.cue-hook-c4 .fra24-grid.is-hook-reveal .fra24-cell.is-overlap,
.math-canvas.cue-hook-c5 .fra24-grid.is-hook-reveal .fra24-cell.is-overlap,
.math-canvas.cue-hook-c6 .fra24-grid.is-hook-reveal .fra24-cell.is-overlap {
  box-shadow: inset 0 0 0 .14rem #7b3fc0;
  background-color: #e5d9f8;
  background-image: repeating-linear-gradient(45deg, rgba(99, 54, 160, .35) 0 .17rem, transparent .17rem .5rem), repeating-linear-gradient(-45deg, rgba(99, 54, 160, .24) 0 .17rem, transparent .17rem .5rem);
}
.fra24-hook-simplify,
.fra24-derived-simplify,
.fra24-improper-bottom,
.fra24-improper-result { opacity: 0; transition: opacity .25s ease; }
.math-canvas.cue-hook-c6 .fra24-hook-simplify { animation: fra24-late-reveal .3s ease .65s forwards; }
.math-canvas.cue-t2-c4 .fra24-derived-simplify,
.math-canvas.cue-t4-c3 .fra24-improper-bottom,
.math-canvas.cue-t4-c3 .fra24-improper-result { opacity: 1; }
@keyframes fra24-late-reveal { to { opacity: 1; } }
.fra24-meaning-lines { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; width: min(100%, 40rem); }
.fra24-meaning-lines > span {
  display: grid;
  gap: .3rem;
  padding: .8rem;
  border: .12rem solid #b9cada;
  border-radius: .8rem;
  background: #f8fbff;
  text-align: center;
}
.fra24-numerator-meaning { border-top-color: #397ec2 !important; }
.fra24-denominator-meaning { border-bottom-color: #9056c7 !important; }
.fra24-derived-result { font-size: 1.1rem; font-weight: 800; }
.fra24-row-rails { display: grid; gap: 1.25rem; width: min(100%, 31rem); }
.fra24-row-rails > span { display: grid; grid-template-columns: auto 1fr auto auto; gap: .6rem; align-items: center; }
.fra24-row-rails i { height: .18rem; border-radius: 999px; background: currentColor; }
.fra24-top-rail { color: #3179bd; }
.fra24-bottom-rail { color: #7f49b2; }
.fra24-row-rails strong {
  display: grid;
  min-width: 2.6rem;
  min-height: 2.6rem;
  place-items: center;
  border-radius: 50%;
  background: currentColor;
  color: #fff;
}
.fra24-improper-scene .fra24-grid { min-height: 15rem; }
.fra24-improper-products { display: flex; }
.fra24-improper-products > span { padding: .45rem .7rem; border-radius: .6rem; background: #f0f6fb; }
.fra24-context-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: min(100%, 40rem); }
.fra24-context-cards section {
  display: grid;
  grid-template-columns: auto auto;
  gap: .65rem;
  align-items: center;
  min-height: 9rem;
  padding: 1rem;
  border: .13rem solid #b6c8da;
  border-radius: 1rem;
  background: linear-gradient(160deg, #fff, #f0f6fc);
}
.fra24-context-cards p { grid-column: 1 / -1; margin: 0; color: #4a6178; }
.fra24-context-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: .75rem; background: #305f93; color: #fff; font-weight: 900; }
.fra24-row-cards { display: grid; gap: .8rem; width: min(100%, 34rem); }
.fra24-card-row { display: grid; grid-template-columns: minmax(7rem, 1fr) repeat(2, minmax(4rem, .55fr)); gap: .65rem; align-items: center; }
.fra24-card-row > span { color: #526d89; font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.fra24-card-row button {
  --fra24-card-colour: #3179bd;
  min-height: 3.5rem;
  border: .14rem solid currentColor;
  border-radius: .8rem;
  background: #fff;
  color: var(--fra24-card-colour);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
}
.fra24-card-row.is-denominator button { --fra24-card-colour: #7f49b2; }
.fra24-card-row button:hover,
.fra24-card-row button:focus-visible { box-shadow: 0 0 0 .22rem rgba(49, 121, 189, .2); outline: none; }
.fra24-card-row button.is-selected { background: var(--fra24-card-colour); color: #fff; box-shadow: inset 0 0 0 .18rem #fff; }
.fra24-row-card-status { margin: 0; color: #526d89; text-align: center; font-weight: 750; }
.fra24-worked {
  display: grid;
  gap: .6rem;
  width: min(100%, 42rem);
  margin: .25rem 0 0;
  padding: 1rem 1rem 1rem 2.5rem;
  border: .12rem solid #9bcdb9;
  border-radius: .85rem;
  background: #eef9f4;
  text-align: left;
}
.fra24-worked li { padding-left: .25rem; }
.fra24-repair-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem 1rem;
  align-items: center;
  width: min(100%, 38rem);
  padding: 1.2rem;
  border: .14rem solid #b990e0;
  border-radius: 1rem;
  background: #f8f2ff;
}
.fra24-repair-panel p { grid-column: 2; margin: 0; }
.fra24-repair-icon { display: grid; grid-row: 1 / 3; width: 3.4rem; height: 3.4rem; place-items: center; border-radius: 50%; background: #7744a9; color: #fff; font-size: 1.6rem; font-weight: 900; }
.fra24-handoff { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; width: min(100%, 38rem); }
.fra24-handoff span,
.fra24-handoff strong { display: grid; min-height: 7rem; place-items: center; padding: 1rem; border: .12rem solid #b6c8da; border-radius: 1rem; background: #f7fbff; text-align: center; }
.fra24-handoff strong { border-color: #8ec8b3; background: #eff9f5; }
.fra24-handoff i { color: #547391; font-size: 1.8rem; }
.fra24-placeholder { text-align: center; }

@media (max-width: 700px) {
  .fra24-visual { min-height: 19rem; padding: .5rem; }
  .fra24-context-cards,
  .fra24-meaning-lines { grid-template-columns: 1fr; }
  .fra24-grid { min-height: 11rem; }
  .fra24-handoff { grid-template-columns: 1fr; }
  .fra24-handoff i { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 420px) {
  .fra24-visual { min-height: 16rem; padding: .2rem; }
  .fra24-fraction { min-width: 2.45rem; font-size: 1.1rem; }
  .fra24-expression,
  .fra24-derived-result,
  .fra24-hook-result,
  .fra24-missing-visual,
  .fra24-improper-products { gap: .38rem; }
  .fra24-grid { grid-template-columns: repeat(var(--fra24-columns), minmax(1.25rem, 1fr)); min-height: 9.5rem; }
  .fra24-improper-scene .fra24-grid { min-height: 11rem; }
  .fra24-map-copy { gap: .35rem; }
  .fra24-map-copy > span { padding: .3rem .5rem; }
  .fra24-context-cards section { min-height: 7.5rem; padding: .7rem; }
  .fra24-card-row { grid-template-columns: 1fr 1fr; }
  .fra24-card-row > span { grid-column: 1 / -1; text-align: center; }
  .fra24-repair-panel { grid-template-columns: 1fr; text-align: center; }
  .fra24-repair-panel p { grid-column: 1; }
  .fra24-repair-icon { grid-row: auto; justify-self: center; }
  .fra24-worked { padding-left: 2rem; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fra24-visual *,
  .fra24-visual *::before,
  .fra24-visual *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .math-canvas.cue-hook-c6 .fra24-hook-simplify { opacity: 1; }
}

/* FRA-19 — owner-approved unlike-denominator addition profile. */
.fra19-context-visual { width: 100%; }
.fra19-visual { width: min(100%, 58rem); margin-inline: auto; }
.fra19-board { display: grid; gap: 1rem; width: 100%; color: #17324d; }
.fra19-board p { margin: 0; }
.fra19-rail-row { display: grid; grid-template-columns: minmax(5rem, auto) 1fr; gap: .75rem; align-items: center; }
.fra19-rail-label { font-weight: 800; text-align: right; }
.fra19-rail { display: grid; grid-template-columns: repeat(var(--fra19-parts), minmax(.4rem, 1fr)); min-height: 3.75rem; overflow: hidden; border: 3px solid #17324d; border-radius: .8rem; background: #fff; box-shadow: 0 .35rem .8rem rgb(23 50 77 / 12%); }
.fra19-cell { display: block; min-width: 0; border-right: 1px solid rgb(23 50 77 / 28%); background: #fff; }
.fra19-cell:last-child { border-right: 0; }
.fra19-cell.is-selected.blue { background: repeating-linear-gradient(135deg, #2878bd 0 7px, #57a4df 7px 12px); }
.fra19-cell.is-selected.amber { background: radial-gradient(circle at center, #f0a52d 0 28%, #ffd782 30% 48%, #f0a52d 50%); background-size: 1.2rem 1.2rem; }
.fra19-cell.is-selected.blend { background: linear-gradient(90deg, #2878bd 0 57%, #f0a52d 57%); }
.fra19-fraction { display: inline-grid; grid-template-rows: auto 2px auto; min-width: 2.3rem; align-items: center; text-align: center; vertical-align: middle; line-height: 1; }
.fra19-fraction i { display: block; height: 2px; background: currentColor; }
.fra19-fraction b { padding: .18rem .3rem; }
.fra19-hook { position: relative; padding: clamp(.5rem, 2vw, 1.25rem); }
.fra19-endpoint-guide { position: absolute; inset: 1rem 1rem auto; border-top: 2px dashed rgb(23 50 77 / 28%); }
.fra19-claim, .fra19-result-card, .fra19-common-card { position: relative; justify-self: center; padding: .7rem 1.1rem; border: 2px solid #17324d; border-radius: .8rem; background: #fff; font-weight: 900; font-size: clamp(1rem, 3vw, 1.35rem); }
.fra19-claim b { position: absolute; inset: 50% -.2rem auto; height: 4px; border-radius: 99px; background: #c83f3f; transform: rotate(-8deg) scaleX(0); transform-origin: left; transition: transform .35s ease; }
.fra19-claim.is-cued b, .fra19-claim[data-target-id].is-cued b, .fra19-repair .fra19-claim b { transform: rotate(-8deg) scaleX(1); }
.fra19-piece-compare { display: flex; justify-content: center; gap: .8rem; align-items: center; font-weight: 800; }
.fra19-piece-compare span, .fra19-denominator-pair b { padding: .45rem .7rem; border-radius: 999px; }
.fra19-piece-compare .blue, .fra19-denominator-pair b:first-child { background: #d9edff; color: #155b91; }
.fra19-piece-compare .amber, .fra19-denominator-pair b:last-child { background: #fff0c9; color: #875306; }
.fra19-goal, .fra19-safe-note, .fra19-efficiency { justify-self: center; padding: .55rem .8rem; border-radius: .65rem; background: #eef5f8; font-weight: 700; text-align: center; }
.fra19-mismatch { grid-template-columns: 1fr 1fr; align-items: end; }
.fra19-lifted { width: var(--piece-width); min-height: 6rem; padding: .8rem; border: 3px solid currentColor; border-radius: .8rem; font-weight: 900; text-align: center; }
.fra19-lifted.blue { justify-self: end; color: #155b91; background: repeating-linear-gradient(135deg, #d9edff 0 8px, #b9ddf7 8px 14px); }
.fra19-lifted.amber { color: #875306; background: radial-gradient(circle, #f0a52d 0 12%, #fff0c9 14%); background-size: 1.5rem 1.5rem; }
.fra19-width-bracket, .fra19-denominator-pair, .fra19-mismatch .fra19-goal { grid-column: 1 / -1; text-align: center; }
.fra19-denominator-pair { display: flex; justify-content: center; gap: 1rem; }
.fra19-multiples { grid-template-columns: 1fr 1fr; }
.fra19-multiples section { padding: 1rem; border: 2px solid #cbdce8; border-radius: .9rem; background: #fff; text-align: center; }
.fra19-multiples section div { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: .7rem; }
.fra19-multiples section span, .fra19-candidates span { min-width: 2.5rem; padding: .45rem; border-radius: .55rem; background: #edf4f8; font-weight: 900; }
.fra19-multiples .fra19-common-card { grid-column: 1 / -1; background: #e4f7e9; border-color: #2b7f4b; }
.fra19-transform-arrow { justify-self: center; color: #4c6680; font-weight: 800; }
.fra19-scale-link, .fra19-divisibility { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.fra19-scale-link span, .fra19-scale-link i, .fra19-divisibility span { padding: .45rem .7rem; border-radius: .6rem; background: #edf4f8; font-style: normal; font-weight: 800; }
.fra19-equivalent-pair, .fra19-source-rails { display: grid; gap: .75rem; }
.fra19-combined-rail { padding-top: .8rem; border-top: 2px dashed #94aec1; }
.fra19-fixed-denominator { text-align: center; font-weight: 800; }
.fra19-transfer-model { gap: .75rem; }
.fra19-efficiency { background: #fff4d6; }
.fra19-handoff { grid-template-columns: repeat(3, 1fr); }
.fra19-handoff > div { min-height: 8rem; padding: 1rem; border: 2px solid #bfd1df; border-radius: 1rem; background: #fff; text-align: center; }
.fra19-handoff > div > span { display: grid; width: 2rem; height: 2rem; margin: 0 auto .5rem; place-items: center; border-radius: 50%; background: #17324d; color: #fff; font-weight: 900; }
.fra19-transition > .fra19-handoff { width: 100%; }
.fra19-final-intro { justify-items: center; }
.fra19-final-intro > strong { font-size: clamp(1.4rem, 4vw, 2rem); }
.fra19-final-intro > div { display: flex; gap: .55rem; }
.fra19-final-intro > div span { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 2px solid #17324d; border-radius: 50%; font-weight: 900; }
.fra19-methods { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fra19-methods section, .fra19-symbolic-card { padding: 1rem; border: 2px solid #bfd1df; border-radius: .9rem; background: #fff; }
.fra19-candidates { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.fra19-candidates .valid { background: #e4f7e9; color: #21623b; }
.fra19-candidates .invalid { background: #ffe5e5; color: #8a2828; text-decoration: line-through; }
.fra19-equivalence-card, .fra19-locked-denominator, .fra19-scale-repair { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; padding: 1rem; border-radius: 1rem; background: #fff; font-size: 1.2rem; font-weight: 900; }
.fra19-cables { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; }
.fra19-cables span { min-height: 4rem; padding: .8rem; border: 3px solid currentColor; border-radius: .8rem; font-weight: 900; text-align: center; }
.fra19-cables .blue { color: #155b91; background: #d9edff; }
.fra19-cables .amber { color: #875306; background: #fff0c9; }
.fra19-cables i { width: 2rem; border-top: 3px solid #17324d; }
.fra19-error-card { justify-self: center; padding: .8rem; border: 2px dashed #c83f3f; border-radius: .8rem; background: #fff6f6; font-weight: 800; }
.fra19-working { margin-top: .3rem; padding: 1rem; border: 2px solid #2b7f4b; border-radius: .9rem; background: #f2fbf4; }
.fra19-working strong { color: #21623b; }
.fra19-working ol { display: grid; gap: .45rem; margin: .7rem 0; padding-left: 1.4rem; }
.fra19-working li { animation: fra19-step-in .28s ease both; animation-delay: calc(var(--worked-step-index, 0) * 100ms); }
.fra19-working p { font-weight: 900; }
.fra19-repair { padding: 1rem; border: 2px solid #f0a52d; border-radius: 1rem; background: #fffaf0; }
.fra19-cued-group, .fra19-board [data-target-id] { transition: transform .3s ease, filter .3s ease, opacity .3s ease; }
.fra19-cued-group.is-cued, .fra19-board [data-target-id].is-cued { filter: saturate(1.18); transform: translateY(-2px); }
.fra19-staged-answer { border: 0; padding: 0; }
.fra19-staged-answer legend { margin-bottom: .75rem; font-weight: 900; }
.fra19-staged-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.fra19-staged-fields label { display: grid; gap: .4rem; min-width: 0; font-weight: 750; }
.fra19-staged-fields input { width: 100%; min-height: 3rem; padding: .55rem; border: 2px solid #9fb6c8; border-radius: .65rem; font: inherit; text-align: center; }
.fra19-staged-fields input:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; border-color: #17324d; }
@keyframes fra19-step-in { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }

@media (max-width: 520px) {
  .fra19-board { gap: .65rem; }
  .fra19-rail-row { grid-template-columns: 1fr; gap: .3rem; }
  .fra19-rail-label { text-align: left; }
  .fra19-rail { min-height: 3rem; }
  .fra19-handoff, .fra19-methods, .fra19-staged-fields { grid-template-columns: 1fr; }
  .fra19-handoff > div { min-height: auto; }
  .fra19-mismatch { gap: .4rem; }
  .fra19-lifted { min-height: 4.5rem; padding: .5rem; }
  .fra19-cables { grid-template-columns: 1fr; }
  .fra19-cables i { width: auto; height: 1rem; border-top: 0; border-left: 3px solid #17324d; justify-self: center; }
  .fra19-working { padding: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fra19-visual *, .fra19-visual *::before, .fra19-visual *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .fra19-board [data-target-id].is-cued { transform: none; outline: 3px solid #ffbf47; outline-offset: 2px; }
}
/* FRA07 owner-authorised recognition lesson. Scoped to the canonical visual primitive. */
.fra07-context-visual {
  width: min(100%, 940px);
}

.fra07-context-visual *,
.fra07-context-visual *::before,
.fra07-context-visual *::after {
  box-sizing: border-box;
}

.fra07-context-visual .fra07-fraction {
  display: inline-grid;
  grid-template-rows: auto 3px auto;
  min-width: 3.15rem;
  place-items: center;
  vertical-align: middle;
  color: #18314f;
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
}

.fra07-context-visual .fra07-fraction--standalone {
  min-width: 4.1rem;
  font-size: clamp(1.9rem, 4.4vw, 2.75rem);
}

.fra07-context-visual .fra07-fraction i {
  width: 100%;
  height: 3px;
  margin-block: .14em;
  background: currentColor;
}

.lesson-shell:has(.fra07-context-visual) :is(.choice-card, .classification-sort-row strong, .worked-steps, .feedback-card) .math-fraction {
  min-width: 2.2em;
  grid-template-rows: auto 3px auto;
  font-size: 1.35em;
  line-height: 1;
}

.lesson-shell:has(.fra07-context-visual) :is(.choice-card, .classification-sort-row strong, .worked-steps, .feedback-card) .math-fraction i {
  height: 3px;
}

.fra07-bar-wrap {
  display: grid;
  gap: .55rem;
  width: 100%;
  min-width: 0;
  justify-items: center;
}

.fra07-bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--fra07-parts), minmax(0, 1fr));
  width: min(100%, 380px);
  min-width: 220px;
  height: clamp(64px, 9vw, 82px);
  overflow: hidden;
  border: 3px solid #18314f;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 8px 22px rgb(24 49 79 / 10%);
}

.fra07-bar > i {
  border-right: 2px solid rgb(24 49 79 / 55%);
  background: #fff;
}

.fra07-bar > i:last-of-type { border-right: 0; }
.fra07-bar > i.is-selected { background: linear-gradient(180deg, #f7d36e, #f0b94a); }

.fra07-endpoint {
  position: absolute;
  z-index: 2;
  left: var(--fra07-end);
  top: -3px;
  bottom: -3px;
  width: 4px;
  border-radius: 4px;
  background: #cf4b45;
  transform: translateX(-50%);
}

.fra07-aligned-bars,
.fra07-download-pair,
.fra07-number-line-pair,
.fra07-subdivide,
.fra07-additive-claim {
  position: relative;
}

.fra07-aligned-bars {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  width: min(100%, 760px);
  margin: 0 auto;
  align-items: stretch;
}

.fra07-aligned-plot,
.fra07-aligned-labels {
  display: grid;
  grid-template-rows: repeat(2, minmax(64px, auto));
  gap: 1.15rem;
  align-items: center;
}

.fra07-aligned-plot { position: relative; min-width: 0; }
.fra07-aligned-plot .fra07-bar {
  width: calc(100% + 6px);
  max-width: none;
  margin-inline: -3px;
}
.fra07-aligned-labels { justify-items: center; }

.fra07-endpoint-guide,
.fra07-shared-guide,
.fra07-line-guide,
.fra07-stationary-pin {
  position: absolute;
  z-index: 4;
  left: var(--fra07-guide);
  width: 2px;
  border-left: 2px dashed #cf4b45;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scaleY(.25);
  transform-origin: center;
}

.fra07-endpoint-guide { inset-block: -.45rem; }
.fra07-aligned-bars.is-revealed .fra07-endpoint-guide,
.fra07-download-pair.is-question .fra07-shared-guide,
.math-canvas.cue-fra07_hook_cue_1 .fra07-shared-guide,
.math-canvas.cue-fra07_t1_cue_3 .fra07-stationary-pin,
.math-canvas.cue-fra07_t2_cue_4 .fra07-line-guide {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
}

.fra07-download-pair {
  display: grid;
  gap: 1rem;
  width: min(100%, 820px);
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid #dbe5ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 15px 34px rgb(24 49 79 / 10%);
}

.fra07-download-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: stretch;
}

.fra07-download-meta,
.fra07-download-bar-stack,
.fra07-download-label-stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(64px, auto));
  gap: 1rem;
  align-items: center;
}

.fra07-download-meta > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem;
  align-items: center;
  color: #24445f;
  font-size: .78rem;
  letter-spacing: .04em;
}

.fra07-download-bar-stack { position: relative; min-width: 0; }
.fra07-download-bar-stack .fra07-bar {
  width: calc(100% + 6px);
  max-width: none;
  min-width: 0;
  margin-inline: -3px;
}
.fra07-download-label-stack { justify-items: center; }
.fra07-download-icon { color: #2b78c5; font-size: 2rem; font-style: normal; font-weight: 800; }
.fra07-shared-guide { inset-block: -.45rem; }
.fra07-scene-label { opacity: 0; transform: translateY(.65rem); }
.fra07-download-pair.is-question .fra07-scene-label,
.math-canvas.cue-fra07_hook_cue_2 .fra07-cue-hook-label-left,
.math-canvas.cue-fra07_hook_cue_3 .fra07-cue-hook-label-right { opacity: 1; transform: translateY(0); }
.math-canvas.cue-fra07_hook_cue_1 .fra07-shared-guide { animation: fra07-guide-pulse 900ms ease-out 1; }

.fra07-reveal-badge,
.fra07-equivalent-label,
.fra07-not-equivalent,
.fra07-factor-verdict {
  justify-self: center;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: #e8f6ee;
  color: #17613f;
  font-size: .84rem;
  letter-spacing: .04em;
  text-align: center;
}

.fra07-subdivide {
  display: grid;
  gap: .75rem;
  width: min(100%, 720px);
  min-height: 200px;
  margin: 0 auto;
  place-items: center;
}

.fra07-transform-track {
  position: relative;
  width: min(100%, 560px);
}

.fra07-transform-bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--fra07-parts), minmax(0, 1fr));
  width: calc(100% + 6px);
  margin-inline: -3px;
  height: clamp(72px, 10vw, 92px);
  overflow: hidden;
  border: 3px solid #18314f;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgb(24 49 79 / 10%);
}

.fra07-transform-cell { position: relative; background: #fff; }
.fra07-transform-cell.is-selected { background: linear-gradient(180deg, #f7d36e, #f0b94a); }
.fra07-transform-cell.is-major-end { border-right: 2px solid rgb(24 49 79 / 64%); }
.fra07-transform-cell.is-new-divider::after {
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 2px;
  background: rgb(24 49 79 / 64%);
  content: "";
  transform: scaleY(0);
  transform-origin: center;
}

.math-canvas.cue-fra07_t1_cue_1 .fra07-transform-cell.is-new-divider::after {
  transform: scaleY(1);
}

.math-canvas.cue-fra07_t1_cue_1 .fra07-transform-cell:nth-child(3)::after { transition-delay: 110ms; }
.math-canvas.cue-fra07_t1_cue_1 .fra07-transform-cell:nth-child(5)::after { transition-delay: 220ms; }
.fra07-stationary-pin { inset-block: -.65rem; }

.fra07-transform-labels {
  display: grid;
  min-height: 5rem;
  place-items: center;
}

.fra07-t1-label-initial,
.fra07-t1-label-revealed { grid-area: 1 / 1; }
.fra07-t1-label-revealed { opacity: 0; transform: translateY(.8rem); }
.math-canvas.cue-fra07_t1_cue_2 .fra07-t1-label-initial { opacity: 0; transform: translateY(-.8rem); }
.math-canvas.cue-fra07_t1_cue_2 .fra07-t1-label-revealed { opacity: 1; transform: translateY(0); }
.fra07-equivalent-label { opacity: 0; transform: translateY(.65rem); }
.math-canvas.cue-fra07_t1_cue_4 .fra07-equivalent-label { opacity: 1; transform: translateY(0); }

.fra07-number-line-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  width: min(100%, 800px);
  margin: 0 auto;
  align-items: stretch;
}

.fra07-number-line-plot { position: relative; min-width: 0; }
.fra07-cue-t2-lines,
.fra07-t2-labels {
  display: grid;
  grid-template-rows: repeat(2, 42px);
  gap: 3rem;
  align-items: center;
}

.fra07-cue-t2-lines { opacity: 0; transform: translateX(-1.25rem); }
.fra07-t2-labels { justify-items: center; }
.fra07-number-line {
  display: grid;
  gap: 1.7rem;
  width: 100%;
  min-width: 0;
  padding: .25rem 1.25rem 0;
}

.fra07-number-line-plot .fra07-number-line { padding-inline: 0; }
.fra07-axis { position: relative; width: 100%; height: 34px; border-bottom: 4px solid #18314f; }
.fra07-axis > i { position: absolute; left: var(--fra07-tick); bottom: -10px; width: 2px; height: 18px; background: #18314f; transform: translateX(-50%); }
.fra07-axis > i span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-style: normal; font-weight: 750; }
.fra07-point { position: absolute; left: var(--fra07-point); bottom: -9px; width: 18px; height: 18px; border: 4px solid #fff; border-radius: 50%; background: #cf4b45; box-shadow: 0 0 0 2px #cf4b45; transform: translateX(-50%); }
.fra07-line-label { display: flex; justify-content: center; }
.fra07-context-visual .fra07-number-line-fraction { min-width: 3.6rem; font-size: clamp(1.55rem, 3.3vw, 2.05rem); }
.fra07-cue-t2-top .fra07-point,
.fra07-cue-t2-bottom .fra07-point { left: 0; opacity: 0; }
.fra07-cue-t2-label-top,
.fra07-cue-t2-label-bottom { opacity: 0; transform: translateX(.75rem); }
.math-canvas.cue-fra07_t2_cue_1 .fra07-cue-t2-lines { opacity: 1; transform: translateX(0); }
.math-canvas.cue-fra07_t2_cue_2 .fra07-cue-t2-top .fra07-point,
.math-canvas.cue-fra07_t2_cue_3 .fra07-cue-t2-bottom .fra07-point { left: var(--fra07-point); opacity: 1; }
.math-canvas.cue-fra07_t2_cue_2 .fra07-cue-t2-label-top,
.math-canvas.cue-fra07_t2_cue_3 .fra07-cue-t2-label-bottom { opacity: 1; transform: translateX(0); }
.fra07-line-guide { top: 34px; bottom: 0; }

.fra07-factor-pair {
  display: grid;
  gap: 1rem;
  justify-items: center;
  width: min(100%, 700px);
  margin: 0 auto;
}

.fra07-factor-pair > div { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); }
.fra07-relation { display: grid; gap: .8rem; min-width: 5rem; color: #2b78c5; font-size: 1.1rem; font-weight: 850; text-align: center; }
.fra07-relation em { display: block; font-style: normal; }
.fra07-teaching-factor-pair .fra07-top-factor,
.fra07-teaching-factor-pair .fra07-bottom-factor,
.fra07-teaching-factor-pair .fra07-factor-verdict { opacity: 0; }
.fra07-teaching-factor-pair .fra07-top-factor { transform: translateX(-1.25rem) scaleX(.2); }
.fra07-teaching-factor-pair .fra07-bottom-factor { transform: translateX(1.25rem) scaleX(.2); }
.math-canvas.cue-fra07_t3_cue_2 .fra07-teaching-factor-pair .fra07-top-factor,
.math-canvas.cue-fra07_t3_cue_3 .fra07-teaching-factor-pair .fra07-bottom-factor { opacity: 1; transform: translateX(0) scaleX(1); }
.math-canvas.cue-fra07_t3_cue_4 .fra07-teaching-factor-pair .fra07-factor-verdict { opacity: 1; transform: translateY(0); }

.fra07-additive-claim { display: grid; gap: 1rem; justify-items: center; }
.fra07-additive-equation { display: flex; align-items: center; gap: clamp(.65rem, 3vw, 1.5rem); }
.fra07-add-arrows { color: #b94843; font-size: 1.1rem; font-weight: 850; line-height: 1.9; text-align: center; }
.fra07-claim-sign { color: #7e8792; font-size: 2.2rem; font-weight: 800; }
.fra07-additive-bars { width: min(100%, 700px); opacity: 0; clip-path: inset(0 100% 0 0); }
.fra07-not-equivalent { opacity: 0; background: #feeceb; color: #9c322e; transform: translateY(.65rem); }
.fra07-additive-claim.is-question .fra07-additive-equation { opacity: 1; }
.fra07-additive-claim.is-question.is-revealed .fra07-additive-bars { opacity: 1; clip-path: inset(0); }
.fra07-additive-claim.is-question.is-revealed .fra07-not-equivalent { opacity: 1; transform: translateY(0); }
.fra07-additive-claim.is-scene .fra07-additive-equation { opacity: 0; transform: translateY(-.8rem); }
.fra07-additive-claim.is-scene .fra07-add-arrows { opacity: 0; transform: translateX(-.8rem); }
.math-canvas.cue-fra07_t4_cue_1 .fra07-additive-claim.is-scene .fra07-additive-equation { opacity: 1; transform: translateY(0); }
.math-canvas.cue-fra07_t4_cue_2 .fra07-additive-claim.is-scene .fra07-add-arrows,
.math-canvas.cue-fra07_t4_cue_3 .fra07-additive-claim.is-scene .fra07-add-arrows { opacity: 1; transform: translateX(0); }
.math-canvas.cue-fra07_t4_cue_4 .fra07-additive-claim.is-scene .fra07-additive-bars { opacity: 1; clip-path: inset(0); }
.math-canvas.cue-fra07_t4_cue_5 .fra07-additive-claim.is-scene .fra07-not-equivalent { opacity: 1; transform: translateY(0); }

.fra07-handoff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: min(100%, 680px); }
.fra07-handoff article { display: grid; gap: .45rem; place-items: center; padding: 1.25rem; border: 1px solid #d8e3ed; border-radius: 18px; background: #fff; text-align: center; }
.fra07-handoff article > span { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; background: #edf5fc; color: #2b78c5; font-size: 1.5rem; font-weight: 850; }
.fra07-handoff > strong { grid-column: 1 / -1; justify-self: center; opacity: 0; transform: translateY(.6rem); }
.math-canvas.cue-fra07_handoff_cue_1 .fra07-handoff article:first-child,
.math-canvas.cue-fra07_handoff_cue_2 .fra07-handoff article:nth-child(2) { border-color: #2b78c5; box-shadow: 0 0 0 4px rgb(43 120 197 / 12%); transform: translateY(-.2rem); }
.math-canvas.cue-fra07_handoff_cue_3 .fra07-handoff > strong { opacity: 1; transform: translateY(0); }

.fra07-choice-models { display: grid; gap: 1rem; width: min(100%, 860px); }
.fra07-target { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .9rem 1rem; border-radius: 14px; background: #edf5fc; }
.fra07-target > span { flex: none; font-weight: 800; }
.fra07-target .fra07-target-bar { width: min(100%, 440px); }
.fra07-choice-models.is-number-line .fra07-target { display: grid; grid-template-columns: auto minmax(0, 1fr); width: 100%; }
.fra07-target-reference-line { width: 100%; }
.fra07-option-model-grid,
.fra07-pair-choice-grid,
.fra07-sort-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; }
.fra07-choice-models.is-number-line .fra07-option-model-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
.fra07-option-model-grid article,
.fra07-pair-choice-grid article,
.fra07-sort-card-grid article { position: relative; display: grid; gap: .8rem; min-width: 0; min-height: 116px; place-items: center; padding: 1.4rem 1rem 1rem; border: 2px solid #dce5ed; border-radius: 16px; background: #fff; }
.fra07-option-model-grid article > b,
.fra07-pair-choice-grid article > b,
.fra07-sort-card-grid article > b { position: absolute; top: .45rem; left: .55rem; color: #567; }
.fra07-option-model-grid article.is-answer,
.fra07-pair-choice-grid article.is-answer { border-color: #25845b; background: #edf9f3; }
.fra07-option-model-grid .fra07-bar { min-width: 0; width: 100%; height: 54px; }
.fra07-option-model-grid .fra07-number-line { width: 100%; }
.fra07-pair-choice-grid article > div,
.fra07-sort-card-grid article { display: flex; align-items: center; justify-content: center; gap: .8rem; }

.fra07-set-model { display: grid; gap: .7rem; place-items: center; }
.fra07-set-model > div { display: grid; grid-template-columns: repeat(4, 1.35rem); gap: .45rem; }
.fra07-set-model > div > i { width: 1.35rem; aspect-ratio: 1; border: 2px solid #18314f; border-radius: 50%; background: #fff; }
.fra07-set-model > div > i.is-selected { background: #f0b94a; box-shadow: inset 0 0 0 3px #fff; }

.fra07-sort-pairs { display: grid; gap: 1rem; width: min(100%, 820px); }
.fra07-sort-buckets { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.fra07-sort-buckets span { padding: .7rem; border: 2px dashed #9eb0c1; border-radius: 12px; text-align: center; }

.fra07-relationship-failure { display: grid; gap: 1rem; width: min(100%, 700px); }
.fra07-relationship-failure > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.fra07-relationship-failure > div:last-child span { padding: .7rem; border-radius: 10px; background: #edf5fc; text-align: center; }
.fra07-relationship-failure > div:last-child span.is-failed { background: #feeceb; color: #9c322e; }

.fra07-context-visual :is(.fra07-scene-label, .fra07-shared-guide, .fra07-endpoint-guide, .fra07-stationary-pin, .fra07-t1-label-initial, .fra07-t1-label-revealed, .fra07-equivalent-label, .fra07-cue-t2-lines, .fra07-point, .fra07-line-guide, .fra07-cue-t2-label-top, .fra07-cue-t2-label-bottom, .fra07-top-factor, .fra07-bottom-factor, .fra07-factor-verdict, .fra07-additive-equation, .fra07-add-arrows, .fra07-additive-bars, .fra07-not-equivalent, .fra07-handoff article, .fra07-handoff > strong),
.fra07-transform-cell.is-new-divider::after {
  transition: opacity 300ms ease, transform 520ms cubic-bezier(.2,.8,.2,1), left 650ms cubic-bezier(.2,.8,.2,1), clip-path 680ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease;
}

@keyframes fra07-guide-pulse {
  0% { filter: drop-shadow(0 0 0 rgb(207 75 69 / 0)); }
  45% { filter: drop-shadow(0 0 7px rgb(207 75 69 / 75%)); }
  100% { filter: drop-shadow(0 0 0 rgb(207 75 69 / 0)); }
}

@media (max-width: 700px) {
  .fra07-choice-models.is-number-line .fra07-option-model-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .fra07-context-visual { width: 100%; }
  .fra07-context-visual .fra07-fraction { min-width: 2.7rem; font-size: 1.25rem; }
  .fra07-context-visual .fra07-fraction--standalone { min-width: 3.35rem; font-size: clamp(1.65rem, 7vw, 2.15rem); }
  .fra07-context-visual .fra07-number-line-fraction { min-width: 3rem; font-size: 1.45rem; }
  .fra07-bar { min-width: 0; height: 56px; }
  .fra07-aligned-bars { grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
  .fra07-aligned-plot,
  .fra07-aligned-labels { grid-template-rows: repeat(2, 56px); gap: .75rem; }
  .fra07-download-pair { padding: .75rem; border-radius: 14px; }
  .fra07-download-grid { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
  .fra07-download-meta { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: .5rem; }
  .fra07-download-meta > span { font-size: .67rem; }
  .fra07-download-bar-stack,
  .fra07-download-label-stack { grid-template-rows: repeat(2, 56px); gap: .7rem; }
  .fra07-download-icon { font-size: 1.45rem; }
  .fra07-transform-bar { height: 68px; }
  .fra07-number-line-pair { grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
  .fra07-cue-t2-lines,
  .fra07-t2-labels { grid-template-rows: repeat(2, 38px); gap: 2.5rem; }
  .fra07-number-line { padding-inline: .75rem; }
  .fra07-axis { height: 30px; }
  .fra07-line-guide { top: 30px; }
  .fra07-factor-pair > div { gap: .55rem; }
  .fra07-relation { min-width: 2.9rem; gap: .6rem; font-size: .95rem; }
  .fra07-option-model-grid,
  .fra07-pair-choice-grid,
  .fra07-sort-card-grid { grid-template-columns: 1fr; gap: .6rem; }
  .fra07-choice-models.is-mixed-model .fra07-option-model-grid { grid-template-columns: 1fr; }
  .fra07-option-model-grid article,
  .fra07-pair-choice-grid article,
  .fra07-sort-card-grid article { min-height: 104px; padding: 1.35rem .65rem .8rem; }
  .fra07-choice-models.is-number-line .fra07-target { grid-template-columns: 1fr; gap: .4rem; }
  .fra07-handoff { gap: .55rem; }
  .fra07-handoff article { padding: .8rem .45rem; }
  .fra07-handoff article small { font-size: .7rem; }
  .fra07-additive-equation { gap: .45rem; }
  .fra07-add-arrows { font-size: .95rem; }
  .classification-sort-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fra07-context-visual *,
  .fra07-context-visual *::before,
  .fra07-context-visual *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}
/* FRA-23: Multiply a fraction by a positive integer. */
.fra23-context-visual { width: min(100%, 860px); margin-inline: auto; }
.fra23-visual { width: 100%; color: #172238; }
.fra23-visual *, .fra23-supported-answer * { box-sizing: border-box; }
.fra23-fraction { display: inline-grid; grid-template-rows: auto 2px auto; min-width: 2.1em; text-align: center; vertical-align: middle; line-height: 1.05; font-size: 1.16em; }
.fra23-fraction i { display: block; height: 2px; margin: .16em .05em; background: currentColor; }
.fra23-fraction b { font-weight: 780; }
.fra23-groups { display: grid; grid-template-columns: repeat(var(--fra23-groups), minmax(74px, 1fr)); gap: .65rem; align-items: stretch; }
.fra23-group { position: relative; display: grid; gap: .4rem; align-content: center; min-height: 90px; padding: .75rem; border: 2px solid #304c89; border-radius: 14px; background: #f8fbff; }
.fra23-group small { color: #304c89; font-weight: 760; }
.fra23-piece-strip { display: grid; grid-template-columns: repeat(var(--fra23-denominator), minmax(7px, 1fr)); min-height: 34px; overflow: hidden; border: 2px solid #283c63; border-radius: 7px; background: #fff; }
.fra23-piece-strip i { min-width: 0; border-right: 1px solid #8294b7; background: #fff; }
.fra23-piece-strip i:last-child { border-right: 0; }
.fra23-piece-strip i.is-selected { background: repeating-linear-gradient(135deg, #82cdd1 0 7px, #dff5f4 7px 14px); }
.fra23-count-badge { position: absolute; top: -.7rem; right: -.45rem; display: grid; place-items: center; min-width: 2rem; min-height: 2rem; border: 2px solid #704aa3; border-radius: 999px; background: #efe5ff; color: #4b2f70; }
.fra23-ruler { position: relative; display: grid; grid-template-columns: auto repeat(var(--fra23-denominator), 1fr) auto; align-items: end; min-height: 46px; margin: 0 0 1rem; padding-bottom: 9px; border-bottom: 4px solid #263b61; }
.fra23-ruler i { height: 12px; border-left: 2px solid #263b61; }
.fra23-ruler b { padding-inline: .3rem; font-size: .8rem; }
.fra23-hook-scene, .fra23-repeated-scene, .fra23-method-scene, .fra23-order-scene, .fra23-question-visual, .fra23-repair-panel { display: grid; gap: 1rem; width: 100%; }
.fra23-claim { position: relative; justify-self: center; display: flex; gap: .7rem; align-items: center; padding: .7rem 1rem; border: 2px solid #aa4c5f; border-radius: 12px; background: #fff3f5; }
.fra23-claim small { color: #72303d; font-weight: 760; }
.fra23-cross { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%) rotate(-8deg); color: #b32642; font-size: 4.3rem; font-weight: 900; line-height: 1; }
.fra23-aligned { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .8rem; align-items: center; }
.fra23-role-key, .fra23-method-lanes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.fra23-role-key span, .fra23-method-lanes span { display: grid; gap: .25rem; padding: .75rem; border-radius: 12px; background: #f0f5ff; }
.fra23-role-key b, .fra23-method-lanes b { color: #52327d; font-size: 1.25rem; }
.fra23-same-unit { margin: 0; color: #34533c; font-weight: 760; }
.fra23-expression, .fra23-question-expression, .fra23-missing { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; align-items: center; padding: 1rem; border: 2px solid #304c89; border-radius: 16px; background: #f8fbff; font-size: clamp(1.25rem, 4vw, 2rem); }
.fra23-method-lanes small { text-transform: uppercase; letter-spacing: .06em; color: #56657c; font-size: .72rem; }
.fra23-wrong-contrast { justify-self: center; padding: .4rem .75rem; border: 2px solid #ac4256; border-radius: 8px; color: #8c263a; text-decoration: line-through 3px; }
.fra23-order-expressions { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; text-align: center; font-size: 1.25rem; }
.fra23-shared-result { justify-self: center; display: flex; gap: .7rem; align-items: center; padding: .7rem 1rem; border-radius: 12px; background: #e9f6ed; color: #245836; font-weight: 760; }
.fra23-handoff { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; padding: 2rem; border: 2px solid #3b5688; border-radius: 18px; background: linear-gradient(90deg,#f2f5fb,#e6f6f2); text-align: center; font-size: clamp(1rem,4vw,1.5rem); }
.fra23-handoff i { font-size: 2rem; }
.fra23-context-card, .fra23-unit-visual, .fra23-badge-visual, .fra23-method-card { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; align-items: center; padding: 1rem; border: 2px solid #48618e; border-radius: 16px; background: #f7faff; }
.fra23-context-card .fra23-piece-strip { flex: 1 1 240px; }
.fra23-bulb, .fra23-integer-badge { display: grid; place-items: center; min-width: 2.4rem; min-height: 2.4rem; border-radius: 999px; background: #f8df7d; }
.fra23-method-card { display: grid; }
.fra23-worked { display: grid; gap: .55rem; margin: 0; padding: 1rem 1rem 1rem 2.5rem; border: 2px solid #3f7650; border-radius: 14px; background: #eff8f1; text-align: left; }
.fra23-worked li::marker { color: #27633a; font-weight: 800; }
.fra23-repair-panel { padding: 1rem; border: 2px solid #7955a6; border-radius: 16px; background: #f7f1ff; }
.fra23-repair-compare, .fra23-repair-unit, .fra23-repair-integer, .fra23-repair-count { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; }
.fra23-repair-compare del { color: #9a3147; text-decoration-thickness: 3px; }
.fra23-supported-answer { display: grid; gap: 1rem; margin: 0; padding: 1rem; border: 2px solid #516991; border-radius: 16px; }
.fra23-support-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: .65rem; }
.fra23-support-choice { min-height: 48px; padding: .65rem; border: 2px solid #66799d; border-radius: 10px; background: #fff; color: #203353; font: inherit; font-weight: 720; cursor: pointer; }
.fra23-support-choice.is-selected { border-color: #315b91; background: #dcecff; box-shadow: inset 0 0 0 2px #315b91; }
.fra23-support-choice:focus-visible { outline: 4px solid #f2b84b; outline-offset: 2px; }

/* Cues reveal the approved teaching event at the spoken anchor. */
.fra23-hook-scene .fra23-ruler, .fra23-hook-scene .fra23-group, .fra23-hook-scene .fra23-claim, .fra23-hook-scene .fra23-cross, .fra23-hook-scene .fra23-aligned,
.fra23-repeated-scene[data-fra23-scene="T1"] .fra23-group, .fra23-repeated-scene[data-fra23-scene="T1"] .fra23-same-unit,
.fra23-repeated-scene[data-fra23-scene="T2"] .fra23-count-badge, .fra23-repeated-scene[data-fra23-scene="T2"] .fra23-role-key span, .fra23-aligned .is-result,
.fra23-method-scene .fra23-expression, .fra23-method-scene .fra23-method-lanes span, .fra23-method-scene .fra23-wrong-contrast, .fra23-method-scene .is-result,
.fra23-order-scene .fra23-order-expressions, .fra23-order-scene .fra23-groups, .fra23-order-scene .fra23-shared-result { visibility: hidden; opacity: 0; }
.fra23-visual.cue-hook-cue-1 .fra23-ruler, .fra23-visual.cue-hook-cue-1 .fra23-hook-scene .fra23-group:first-child { visibility: visible; opacity: 1; }
.fra23-visual.cue-hook-cue-2 .fra23-hook-scene .fra23-group { visibility: visible; opacity: 1; }
.fra23-visual.cue-hook-cue-3 .fra23-claim { visibility: visible; opacity: 1; }
.fra23-visual.cue-hook-cue-4 .fra23-cross { visibility: visible; opacity: 1; }
.fra23-visual.cue-hook-cue-5 .fra23-aligned, .fra23-visual.cue-hook-cue-6 .fra23-aligned, .fra23-visual.cue-hook-cue-7 .fra23-aligned, .fra23-visual.cue-hook-cue-7 .fra23-aligned .is-result { visibility: visible; opacity: 1; }
.fra23-visual.cue-t1-cue-1 .fra23-repeated-scene[data-fra23-scene="T1"] .fra23-group:first-child { visibility: visible; opacity: 1; }
.fra23-visual.cue-t1-cue-2 .fra23-repeated-scene[data-fra23-scene="T1"] .fra23-group { visibility: visible; opacity: 1; }
.fra23-visual.cue-t1-cue-3 .fra23-repeated-scene[data-fra23-scene="T1"] .fra23-same-unit { visibility: visible; opacity: 1; }
.fra23-visual.cue-t2-cue-1 .fra23-group:nth-child(1) .fra23-count-badge { visibility: visible; opacity: 1; }
.fra23-visual.cue-t2-cue-2 .fra23-group:nth-child(-n+2) .fra23-count-badge { visibility: visible; opacity: 1; }
.fra23-visual.cue-t2-cue-3 .fra23-group:nth-child(-n+3) .fra23-count-badge { visibility: visible; opacity: 1; }
.fra23-visual.cue-t2-cue-4 .fra23-count-badge, .fra23-visual.cue-t2-cue-5 .fra23-count-badge, .fra23-visual.cue-t2-cue-6 .fra23-count-badge { visibility: visible; opacity: 1; }
.fra23-visual.cue-t2-cue-5 .fra23-role-key span:first-child, .fra23-visual.cue-t2-cue-6 .fra23-role-key span { visibility: visible; opacity: 1; }
.fra23-visual.cue-t3-cue-1 .fra23-method-scene .fra23-expression { visibility: visible; opacity: 1; }
.fra23-visual.cue-t3-cue-2 .fra23-method-scene .fra23-expression, .fra23-visual.cue-t3-cue-2 .fra23-method-lanes span:first-child { visibility: visible; opacity: 1; }
.fra23-visual.cue-t3-cue-3 .fra23-method-scene .fra23-expression, .fra23-visual.cue-t3-cue-3 .fra23-method-lanes span { visibility: visible; opacity: 1; }
.fra23-visual.cue-t3-cue-4 .fra23-method-scene .fra23-expression, .fra23-visual.cue-t3-cue-4 .fra23-method-lanes span, .fra23-visual.cue-t3-cue-4 .fra23-method-scene .fra23-wrong-contrast, .fra23-visual.cue-t3-cue-4 .fra23-method-scene .is-result { visibility: visible; opacity: 1; }
.fra23-visual.cue-t4-cue-1 .fra23-order-expressions { visibility: visible; opacity: 1; }
.fra23-visual.cue-t4-cue-2 .fra23-order-expressions, .fra23-visual.cue-t4-cue-2 .fra23-order-scene .fra23-groups { visibility: visible; opacity: 1; }
.fra23-visual.cue-t4-cue-3 .fra23-order-expressions, .fra23-visual.cue-t4-cue-3 .fra23-order-scene .fra23-groups, .fra23-visual.cue-t4-cue-3 .fra23-shared-result { visibility: visible; opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .fra23-visual .fra23-ruler, .fra23-visual .fra23-group, .fra23-visual .fra23-claim, .fra23-visual .fra23-cross, .fra23-visual .fra23-aligned, .fra23-visual .fra23-count-badge, .fra23-visual .fra23-expression, .fra23-visual .fra23-method-lanes span, .fra23-visual .fra23-wrong-contrast, .fra23-visual .fra23-order-expressions, .fra23-visual .fra23-shared-result { transition: opacity .35s ease, transform .35s ease; }
}
@media (max-width: 640px) {
  .fra23-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fra23-role-key, .fra23-method-lanes { grid-template-columns: 1fr; }
  .fra23-order-expressions { grid-template-columns: 1fr; }
  .fra23-handoff { grid-template-columns: 1fr; padding: 1.1rem; }
  .fra23-aligned { grid-template-columns: 1fr; }
  .fra23-group { min-height: 74px; padding: .55rem; }
}
/* FRA-26: Understand Reciprocals */
.fra26-visual {
  --fra26-ink: #18324a;
  --fra26-blue: #2979b8;
  --fra26-teal: #2aa59a;
  --fra26-gold: #f3b73f;
  color: var(--fra26-ink);
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 32px);
}

.fra26-visual :is(.fra26-equation, .fra26-card-row, .fra26-exchange-cards, .fra26-handoff, .fra26-match-visual, .fra26-statement-visual) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 2vw, 22px);
}

.fra26-fraction,
.fra26-built-product,
.fra26-input-fraction,
.fra26-fixed-stage {
  display: inline-grid;
  grid-template-rows: auto 3px auto;
  align-items: center;
  justify-items: center;
  min-width: 56px;
  font-size: clamp(1.35rem, 4vw, 2.2rem);
  line-height: 1.05;
}

.fra26-fraction > i,
.fra26-built-product > i,
.fra26-input-fraction > i,
.fra26-fixed-stage > i {
  width: 100%;
  min-width: 46px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

.fra26-whole { font-size: clamp(1.6rem, 5vw, 2.7rem); font-weight: 800; }
.fra26-source { color: var(--fra26-blue); }
.fra26-reciprocal { color: var(--fra26-teal); }
.fra26-equation { font-size: clamp(1.4rem, 4vw, 2.15rem); font-weight: 700; }
.fra26-equation strong { color: #176f54; font-size: 1.2em; }

.fra26-hook,
.fra26-product,
.fra26-exchange,
.fra26-integer-cards,
.fra26-zero,
.fra26-question-equation,
.fra26-choice-contrast {
  width: min(100%, 760px);
  display: grid;
  gap: 22px;
  justify-items: center;
}

.fra26-width-labels { width: min(100%, 610px); display: flex; justify-content: space-between; font-weight: 750; }
.fra26-title-card { width: min(100%, 610px); display: grid; gap: 8px; justify-items: start; }
.fra26-title-card b { letter-spacing: .22em; font-size: clamp(1.1rem, 4vw, 2rem); }
.fra26-title-card i { display: block; width: calc(var(--fra26-width) * 1% * 4); max-width: 100%; height: 24px; border-radius: 8px; background: linear-gradient(90deg, var(--fra26-blue), var(--fra26-teal)); box-shadow: 0 7px 20px #276f9a25; transition: width .56s ease; }
.fra26-title-card.is-scaled i { background: linear-gradient(90deg, var(--fra26-teal), #79c9a6); }
.fra26-scale-arrow { display: flex; align-items: center; gap: 10px; color: #536779; font-weight: 800; }
.fra26-hook-outcomes { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fra26-hook-outcomes article { padding: 14px; border: 2px solid #d8e3ec; border-radius: 16px; background: #fff; }
.fra26-hook-outcomes article.is-restored { border-color: #65bca2; background: #f0fbf7; }

.fra26-product-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fra26-product-lines span { padding: 8px 13px; background: #eef7fd; border-radius: 999px; font-weight: 700; }
.fra26-pair-label { padding: 7px 12px; border-radius: 999px; background: #dff7ef; color: #176f54; letter-spacing: .08em; font-size: .78rem; }
.fra26-exchange-cards { min-height: 120px; }
.fra26-exchange-cards > .fra26-fraction { padding: 18px 22px; border: 2px solid currentColor; border-radius: 18px; background: #fff; }
.fra26-curved-paths { width: 72px; height: 48px; position: relative; }
.fra26-curved-paths i { position: absolute; inset-inline: 2px; height: 22px; border: 3px solid var(--fra26-gold); border-inline-color: transparent; }
.fra26-curved-paths i:first-child { top: 0; border-bottom: 0; border-radius: 50% 50% 0 0; }
.fra26-curved-paths i:last-child { bottom: 0; border-top: 0; border-radius: 0 0 50% 50%; }
.fra26-exchange p, .fra26-question-equation p, .fra26-choice-contrast p { margin: 0; color: #536779; font-weight: 650; text-align: center; }

.fra26-card-row article,
.fra26-self-card,
.fra26-statement-visual article,
.fra26-match-card {
  min-width: 130px;
  min-height: 108px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 14px;
  border: 2px solid #d6e4ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px #16324a12;
}
.fra26-card-row small, .fra26-self-card small { color: #607486; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.fra26-self-card { grid-template-columns: repeat(4, auto); }
.fra26-self-card small { grid-column: 1 / -1; }
.fra26-zero-target { font-size: clamp(1.7rem, 5vw, 2.7rem); font-weight: 850; }
.fra26-zero-target span { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; border: 2px dashed var(--fra26-blue); border-radius: 12px; }
.fra26-zero-trials { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.fra26-zero-trials span { padding: 9px 12px; border-radius: 10px; background: #f1f5f8; font-weight: 700; }
.fra26-invalid-fraction { display: grid; justify-items: center; gap: 8px; color: #a23b3b; }
.fra26-invalid-fraction s { font-size: 2rem; }
.fra26-invalid-fraction strong { padding: 7px 12px; border: 2px solid currentColor; border-radius: 999px; letter-spacing: .06em; }

.fra26-working { width: min(100%, 620px); margin: 4px 0 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.fra26-working li { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f3f8fb; animation: fra26-step-in .28s ease both; animation-delay: calc(var(--fra26-step) * 90ms); }
.fra26-working li > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--fra26-blue); color: white; }
.fra26-working li > b { font-weight: 650; }
.fra26-handoff { width: min(100%, 680px); font-weight: 800; }
.fra26-handoff :is(span, strong) { padding: 14px; border-radius: 14px; background: #eef7fd; text-align: center; }
.fra26-handoff strong { background: #e4f8f1; color: #176f54; }
.fra26-match-visual > div { display: grid; gap: 10px; }
.fra26-empty-factor { min-width: 60px; min-height: 58px; display: grid; place-items: center; border: 2px dashed #7990a4; border-radius: 14px; }

.fra26-matching-input,
.fra26-tile-input,
.fra26-staged-input { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.fra26-matching-input legend,
.fra26-tile-input legend,
.fra26-staged-input legend { margin-bottom: 10px; font-weight: 750; }
.fra26-matching-input label { display: grid; grid-template-columns: minmax(70px, .5fr) minmax(160px, 1fr); align-items: center; gap: 12px; }
.fra26-matching-input select,
.fra26-tile-input select,
.fra26-staged-input input { min-height: 48px; border: 2px solid #b9cad7; border-radius: 12px; background: #fff; color: #18324a; font: inherit; padding: 9px 12px; }
.fra26-matching-input :is(select, input):focus-visible,
.fra26-tile-input select:focus-visible,
.fra26-staged-input input:focus-visible { outline: 3px solid #f3b73f; outline-offset: 2px; }
.fra26-input-fraction { grid-template-columns: minmax(130px, 1fr); grid-template-rows: auto 3px auto; gap: 7px; width: min(100%, 260px); }
.fra26-input-fraction label { width: 100%; display: grid; gap: 4px; font-size: .82rem; }
.fra26-fixed-stage { width: 130px; }
.fra26-fixed-stage input { width: 100%; text-align: center; }
.fra26-staged-input [data-fra26-reciprocal-stage] { display: grid; gap: 9px; }
.fra26-staged-input [hidden] { display: none !important; }

@keyframes fra26-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 540px) {
  .fra26-visual { min-height: 250px; padding: 12px 6px; }
  .fra26-hook-outcomes { grid-template-columns: 1fr; }
  .fra26-card-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 7px; }
  .fra26-card-row article { min-width: 0; width: 100%; padding: 10px 6px; }
  .fra26-card-row article:last-child { grid-column: 1 / -1; width: min(160px, 100%); justify-self: center; }
  .fra26-matching-input label { grid-template-columns: 1fr; gap: 5px; }
  .fra26-match-visual { display: grid !important; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 8px; }
  .fra26-match-visual > div { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fra26-match-visual > span { transform: rotate(90deg); }
  .fra26-match-card { min-width: 0; width: 100%; min-height: 82px; padding: 8px 4px; }
  .fra26-handoff { display: grid; grid-template-columns: 1fr; }
  .fra26-handoff i { transform: rotate(90deg); }
  .fra26-working li { grid-template-columns: 28px minmax(0, 1fr); }
  .fra26-exchange-cards > .fra26-fraction { padding: 12px 15px; }
  .fra26-curved-paths { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .fra26-visual *, .fra26-visual *::before, .fra26-visual *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
}

/* FRA-28: Divide by a Fraction */
.fra28-context-visual { width: min(100%, 760px); min-height: 290px; }
.fra28-visual { width: 100%; color: #18324a; font-weight: 650; }
.fra28-measurement-card, .fra28-symbolic-card, .fra28-context-card, .fra28-range-card, .fra28-handoff, .fra28-repair-card {
  width: min(100%, 700px); margin: auto; padding: clamp(16px, 3vw, 28px); border: 2px solid #c9dce8; border-radius: 24px; background: linear-gradient(145deg, #fff, #f4fbff); box-shadow: 0 12px 28px rgba(24, 50, 74, .08);
}
.fra28-fraction { display: inline-grid; grid-template-rows: auto 2px auto; min-width: 34px; gap: 2px; align-items: center; text-align: center; vertical-align: middle; font-size: 1.08em; line-height: 1; }
.fra28-fraction i { height: 2px; background: currentColor; }
.fra28-strip { position: relative; display: grid; grid-template-columns: repeat(var(--parts), 1fr); width: 100%; min-height: 72px; margin: 28px 0 56px; border: 3px solid #254e70; border-radius: 13px; background: #fff; }
.fra28-strip-cell { border-right: 2px solid #7b9db5; background: #fff; }
.fra28-strip-cell:last-of-type { border-right: 0; }
.fra28-strip-cell.is-active { background: linear-gradient(#f8d272, #f2b93f); }
.fra28-group-bracket { position: absolute; left: calc(var(--group-index) * var(--group-size) * 100% / var(--total)); bottom: -40px; width: calc(var(--group-size) * 100% / var(--total)); height: 29px; border: solid #217a66; border-width: 0 3px 3px; border-radius: 0 0 8px 8px; text-align: center; color: #176653; }
.fra28-group-bracket b { position: relative; top: 8px; padding: 1px 6px; border-radius: 999px; background: #def5ed; }
.fra28-measurement-label, .fra28-measure-tile, .fra28-count-result { display: flex; align-items: center; justify-content: center; gap: 10px; }
.fra28-measure-tile { width: fit-content; margin: auto; padding: 10px 16px; border: 2px dashed #217a66; border-radius: 14px; background: #e8f8f2; }
.fra28-count-result { margin-top: 16px; color: #176653; }
.fra28-count-result strong { font-size: 2rem; }
.fra28-expression, .fra28-rewrite { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(9px, 2vw, 18px); }
.fra28-expression > span, .fra28-rewrite > span { display: grid; gap: 8px; min-width: 105px; padding: 14px; border-radius: 16px; background: #eaf4fb; text-align: center; }
.fra28-expression small, .fra28-rewrite small { font-size: .72rem; color: #526a7d; }
.fra28-rewrite { margin-top: 22px; padding-top: 20px; border-top: 2px dashed #b7cad7; }
.fra28-reciprocal-card { background: #e4f7ef !important; color: #176653; }
.fra28-rewrite-placeholder { display: grid; place-items: center; min-height: 92px; margin-top: 22px; border-top: 2px dashed #b7cad7; color: #6a8090; font-size: 2rem; }
.fra28-context-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; }
.fra28-container, .fra28-pot, .fra28-wire-sections i { display: grid; place-items: center; gap: 6px; padding: 12px; border-radius: 16px; background: #eaf4fb; }
.fra28-portions, .fra28-wire-sections { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fra28-container > i, .fra28-pot > i { width: 52px; height: 42px; border: 3px solid #326986; border-radius: 7px 7px 14px 14px; background: linear-gradient(transparent 35%, #62b7d8 36%); }
.fra28-cable { width: min(260px, 100%); height: 18px; border-radius: 999px; background: #244f6d; position: relative; }
.fra28-cable span { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); white-space: nowrap; }
.fra28-range-line { position: relative; display: flex; align-items: center; gap: 9px; margin: 24px 10px 44px; }
.fra28-range-line > i { flex: 1; height: 5px; border-radius: 999px; background: #326986; }
.fra28-range-line > b { position: absolute; left: calc(24px + var(--position) * (100% - 48px)); top: 20px; transform: translateX(-50%); color: #176653; }
.fra28-handoff ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0; list-style-position: inside; }
.fra28-handoff li { padding: 13px; border-radius: 14px; background: #eaf4fb; }
.fra28-repair-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; text-align: center; }
.fra28-repair-card span { padding: 16px; border-radius: 16px; }
.fra28-repair-card .is-unsafe { background: #fff0ed; color: #9d3d31; text-decoration: line-through; }
.fra28-repair-card .is-safe { background: #e4f7ef; color: #176653; }
.fra28-compound-answer, .fra28-inline-fraction { margin: 0; padding: 0; border: 0; }
.fra28-compound-answer { display: grid; gap: 15px; }
.fra28-compound-answer > legend, .fra28-inline-fraction > legend { margin-bottom: 10px; font-weight: 750; }
.fra28-paired-fractions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fra28-inline-fraction .fraction-input input { min-width: 0; width: 100%; }
.fra28-compound-answer .choice-card:focus-visible, .fra28-inline-fraction input:focus-visible { outline: 3px solid #f3b73f; outline-offset: 2px; }

@media (max-width: 520px) {
  .fra28-context-visual { min-height: 250px; }
  .fra28-measurement-card, .fra28-symbolic-card, .fra28-context-card, .fra28-range-card, .fra28-handoff, .fra28-repair-card { padding: 14px 10px; border-radius: 18px; }
  .fra28-expression > span, .fra28-rewrite > span { min-width: 82px; padding: 10px 7px; }
  .fra28-handoff ol, .fra28-paired-fractions { grid-template-columns: 1fr; }
  .fra28-repair-card { grid-template-columns: 1fr; }
  .fra28-repair-card > b { transform: rotate(90deg); }
  .fra28-strip { margin-bottom: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .fra28-visual *, .fra28-visual *::before, .fra28-visual *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
}