/* ============================================================================
   Family Math Studio v3.0 - page BODY (Learn, Try, Play, Celebrate stops).
   Maps the page's existing class names onto the design-system tokens in tokens.css, so every
   stop draws from the same colors, sizes, radii and shadows as family.css. Layout lives here;
   look comes from var(--fm-*) only. No raw color, no px font size, no !important except where
   documented. Gate: npm run validate:family-body-tokens.
   ============================================================================ */
@layer patterns {
/* !important (documented i18n/a11y): the language the family did not pick is removed from the page, and no component display rule may bring it back. */
body.lang-mode-bilingual .vocab-term .lang-es, body.lang-mode-bilingual .vocab-back-term .lang-es, body.lang-mode-es .vocab-es, body.lang-mode-es .vocab-back-term-es, body.lang-mode-en .vocab-es, body.lang-mode-en .vocab-back-term-es, body:not(.lang-mode-bilingual) .lang-label, body.lang-mode-es .tab-en, body:not(.lang-mode-es) .tab-es, body.lang-mode-en .lang-es, body.lang-mode-en .tab-es, body.lang-mode-en .vocab-def-es, body.lang-mode-en .ext-title-es, body.lang-mode-en [lang="es"], body.lang-mode-en .bilingual-col.lang-es, body.lang-mode-en .obj-popup-translation, body.lang-mode-es .lang-en, body.lang-mode-es .vocab-def, body.lang-mode-es .ext-title-en, body.lang-mode-es .learning-big:not(:is([lang="es"], [lang="es"] *)), body.lang-mode-es .bilingual-col.lang-en, body.lang-mode-es .concept-title-en {
  display: none !important;
}
.vocab-card-back .lang-en, .vocab-card-back .lang-es { color: inherit; }
.vocab-btn-gotit .lang-en, .vocab-btn-gotit .lang-es { color: inherit; }
.hw-graph-controls button[aria-pressed="true"] .lang-en, .hw-graph-controls button[aria-pressed="true"] .lang-es { color: inherit; }
.fill-table th .lang-en, .fill-table th .lang-es { color: inherit; }
.step-badge .lang-en, .step-badge .lang-es { color: inherit; }
.btn-primary .lang-en, .btn-primary .lang-es { color: inherit; }
.obj-popup-backdrop .lang-en, .obj-popup-backdrop .lang-es { color: inherit; }
.homework-tab-extra.is-active .lang-en, .homework-tab-extra.is-active .lang-es { color: inherit; }
.help-modal-overlay .lang-en, .help-modal-overlay .lang-es { color: inherit; }
.ai-lab-cta .lang-en, .ai-lab-cta .lang-es { color: inherit; }
.signoff-submit-btn .lang-en, .signoff-submit-btn .lang-es { color: inherit; }
.print-cert-btn .lang-en, .print-cert-btn .lang-es { color: inherit; }
.flow-next-btn .lang-en, .flow-next-btn .lang-es { color: inherit; }
.powerup-choice-btn.is-correct .powerup-letter .lang-en, .powerup-choice-btn.is-correct .powerup-letter .lang-es { color: inherit; }
.tool-btn.is-active .lang-en, .tool-btn.is-active .lang-es { color: inherit; }
.btn-high-five .lang-en, .btn-high-five .lang-es { color: inherit; }
.hw-stuck-fab .lang-en, .hw-stuck-fab .lang-es { color: inherit; }
.wb-tool-tab.is-active .lang-en, .wb-tool-tab.is-active .lang-es { color: inherit; }
.tape-block-a .lang-en, .tape-block-a .lang-es { color: inherit; }
.tape-block-b .lang-en, .tape-block-b .lang-es { color: inherit; }
.fam-arcade-chip.is-active .lang-en, .fam-arcade-chip.is-active .lang-es { color: inherit; }
.visual-lab-kicker .lang-en, .visual-lab-kicker .lang-es { color: inherit; }
.mini-dot .lang-en, .mini-dot .lang-es { color: inherit; }
.section-title::before .lang-en, .section-title::before .lang-es { color: inherit; }
header.packet h1::after .lang-en, header.packet h1::after .lang-es { color: inherit; }
.concept-zoom-dialog::backdrop .lang-en, .concept-zoom-dialog::backdrop .lang-es { color: inherit; }
.bottom-status-bar .lang-en, .bottom-status-bar .lang-es { color: inherit; }
.btn-read-aloud.is-speaking .lang-en, .btn-read-aloud.is-speaking .lang-es { color: inherit; }
.pb-viewfinder .lang-en, .pb-viewfinder .lang-es { color: inherit; }
.pb-viewfinder.card-ish .lang-en, .pb-viewfinder.card-ish .lang-es { color: inherit; }
.frame-champion .pb-frame-header .lang-en, .frame-champion .pb-frame-header .lang-es { color: inherit; }
.pb-idle-placeholder .lang-en, .pb-idle-placeholder .lang-es { color: inherit; }
.pb-btn-snap .lang-en, .pb-btn-snap .lang-es { color: inherit; }
.fam-mission-complete.is-complete .lang-en, .fam-mission-complete.is-complete .lang-es { color: inherit; }
.mathpad-tab.is-active .lang-en, .mathpad-tab.is-active .lang-es { color: inherit; }
.mathpad-fab .lang-en, .mathpad-fab .lang-es { color: inherit; }
.hw-stepper-dot.is-current .lang-en, .hw-stepper-dot.is-current .lang-es { color: inherit; }
.hw-stepper-dot.is-current.is-done .lang-en, .hw-stepper-dot.is-current.is-done .lang-es { color: inherit; }
.hw-lightbox-dialog .lang-en, .hw-lightbox-dialog .lang-es { color: inherit; }
.hw-lightbox-dialog::backdrop .lang-en, .hw-lightbox-dialog::backdrop .lang-es { color: inherit; }
.grid-btn.is-active .lang-en, .grid-btn.is-active .lang-es { color: inherit; }
.hw-pip.is-on .lang-en, .hw-pip.is-on .lang-es { color: inherit; }
.hw-mystery-open .lang-en, .hw-mystery-open .lang-es { color: inherit; }
.hw-night.is-on .lang-en, .hw-night.is-on .lang-es { color: inherit; }
.learn-pager-dot.is-on .lang-en, .learn-pager-dot.is-on .lang-es { color: inherit; }
.cf .lang-en, .cf .lang-es { color: inherit; }
.cf-btn .lang-en, .cf-btn .lang-es { color: inherit; }
.dom-duo-actions .btn[aria-pressed="true"] .lang-en, .dom-duo-actions .btn[aria-pressed="true"] .lang-es { color: inherit; }
.hw-listen-bar .btn-read-aloud[aria-pressed="true"] .lang-en, .hw-listen-bar .btn-read-aloud[aria-pressed="true"] .lang-es { color: inherit; }
.star-chip {
  padding: 4px 10px;
  border-radius: var(--fm-radius-pill);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  background: var(--fm-raised);
  border: 1px solid var(--fm-accent);
  color: var(--fm-text);
  flex: 0 0 auto;
  white-space: nowrap;
}
.stars-milestone-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.parent-coach-prompt {
  background: var(--fm-highlight-tint);
  border: 1px dashed var(--fm-highlight);
  border-radius: var(--fm-radius-sm);
  padding: 8px 12px;
  margin-top: 10px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-highlight-ink);
  line-height: var(--fm-lh-body);
}
.parent-coach-prompt strong {
  color: var(--fm-highlight-ink);
}
.visual-explanation-card {
  background: var(--fm-raised);
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 12px 14px;
  margin-top: 12px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  line-height: var(--fm-lh-body);
  box-shadow: var(--fm-shadow-raised);
}
.visual-explanation-card .exp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fm-font-display);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  color: var(--fm-info-ink);
  margin-bottom: 6px;
}
.visual-explanation-card .exp-trap {
  background: var(--fm-highlight-tint);
  border-left: 3px solid var(--fm-highlight);
  padding: 6px 10px;
  border-radius: 0 var(--fm-radius-xs) var(--fm-radius-xs) 0;
  margin-bottom: 8px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-highlight-ink);
}
.visual-explanation-card .exp-why {
  margin-bottom: 8px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.visual-explanation-card .exp-coach {
  background: var(--fm-highlight-tint);
  border: 1px dashed var(--fm-highlight);
  border-radius: var(--fm-radius-xs);
  padding: 6px 10px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-highlight-ink);
}
.visual-explanation-card.is-nudge {
  background: var(--fm-raised);
  border-color: var(--fm-highlight);
  box-shadow: var(--fm-shadow-raised);
}
.visual-explanation-card.is-nudge .exp-header {
  color: var(--fm-highlight-ink);
}
.visual-explanation-card .exp-retry {
  margin-top: 10px;
}
.visual-explanation-card .hw-reveal-btn {
  min-height: 44px;
}
.visual-explanation-card .exp-worked {
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--fm-raised);
  border: 1px solid var(--fm-highlight);
  border-radius: var(--fm-radius-sm);
}
.visual-explanation-card .exp-worked ol {
  margin: 6px 0 4px;
  padding-left: 1.3em;
}
.visual-explanation-card .exp-worked li {
  margin: 3px 0;
}
.visual-explanation-card .exp-worked-note {
  margin: 4px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-highlight-ink);
}
body[data-family-style] .powerup-tag {
  color: var(--fm-highlight-ink);
  background: var(--fm-highlight-tint);
}
.big-idea .family-big-idea-piece {
  padding: clamp(16px,3vw,24px);
  border: 2px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  background: var(--fm-success-tint);
}
.big-idea .family-big-idea-copy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.big-idea .family-big-idea-copy p {
  margin: 0;
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
  font-weight: var(--fm-fw-bold);
}
.big-idea .family-big-idea-copy p.lang-es {
  margin-left: auto;
  padding-left: 12px;
  border-left: 2px solid var(--fm-accent);
}
.big-idea .family-big-idea-visual {
  margin: 16px auto 0;
  max-width: 620px;
  padding: 14px;
  border: 1px solid var(--fm-success);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  text-align: center;
}
.big-idea .family-big-idea-visual p {
  margin: 10px 0 0;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
}
.big-idea .family-whole-labels {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--fm-fs-2xl);
}
.big-idea .family-whole-labels > strong {
  padding: 6px 10px;
  border-radius: var(--fm-radius-sm);
  background: var(--fm-success-tint);
}
.big-idea .family-whole-labels > strong:last-child {
  background: var(--fm-success-tint);
}
.big-idea .family-whole-bar span.is-filled {
  background: var(--fm-success);
  border-color: var(--fm-success);
  color: var(--fm-on-success);
}
.big-idea .family-whole-bar {
  display: grid;
  gap: 4px;
  margin: 14px auto 0;
}
.big-idea .family-whole-bar span {
  height: 26px;
  border: 1px solid var(--fm-success);
  border-radius: var(--fm-radius-xs);
  background: var(--fm-success-tint);
}
.big-idea .family-discount-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: 460px;
  margin: 8px auto 0;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
}
.big-idea .family-whole-labels {
  justify-content: space-between;
  font-size: var(--fm-fs-lg);
}
.big-idea .family-whole-bar {
  grid-template-columns: repeat(10,1fr);
  max-width: 460px;
}
body[data-family-style] [id^="hw_panel_"] p {
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
}
body[data-family-style] [id^="hw_panel_"] li, body[data-family-style] [id^="hw_panel_"] label, body[data-family-style] .problem-stem, body[data-family-style] .choice-text {
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
}
body[data-family-style] .visual-lab-heading>p, body[data-family-style] .visual-lab-lang-note, body[data-family-style] .visual-representation-card p, body[data-family-style] .visual-coach-q {
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
}
body[data-family-style] .homework-tab-btn {
  font-size: var(--fm-fs-lg);
}
#nsr-workbench {
  display: none;
}
.hw-tab-meta-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 12px 2px 12px;
}
.btn-listen-prob {
  background: var(--fm-accent-tint);
  border: 1px solid var(--fm-accent);
  color: var(--fm-accent-ink);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  padding: 3px 8px;
  border-radius: var(--fm-radius-md);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}
.cert-streak-box {
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--fm-highlight-tint);
  border-radius: var(--fm-radius-sm);
  color: var(--fm-highlight-ink);
  font-size: var(--fm-fs-sm);
}
* {
  box-sizing: border-box;
}
a {
  color: var(--fm-text);
  text-decoration: none;
  font-weight: var(--fm-fw-bold);
}
.family-problem-tip {
  margin: -8px 0 14px 0;
  padding: 10px 12px;
  background: var(--fm-highlight-tint);
  border-left: 3px solid var(--fm-highlight);
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-fs-xs);
  color: var(--fm-highlight-ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.family-problem-tip .lang-es {
  color: var(--fm-text);
  font-size: var(--fm-fs-xs);
}
.family-hint-box {
  margin-bottom: 14px;
  padding: 2px 0 2px 14px;
  background: none;
  border-left: 3px solid var(--fm-accent);
  border-radius: 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.family-hint-box p {
  margin: 0 0 6px 0;
}
.family-hint-box p:last-child {
  margin-bottom: 0;
}
.vocab-family-note {
  margin: 0 0 16px 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  line-height: var(--fm-lh-body);
}
.vocab-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
  width: 100%;
}
.vocab-card {
  position: relative;
  height: 410px;
  perspective: 1200px;
}
.vocab-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.vocab-card.flipped .vocab-card-inner {
  transform: rotateY(180deg);
}
.vocab-card-front {
  background: var(--fm-raised);
  color: var(--fm-text);
  border: 1.5px solid var(--fm-info-ink);
  box-shadow: var(--fm-shadow-float);
  padding: 16px 18px;
  justify-content: space-between;
  transform: rotateY(0deg);
}
.vocab-card.is-known .vocab-card-front {
  border-color: var(--fm-border);
}
.vocab-thumb-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0;
}
.vocab-thumb {
  width: min(100%, 260px);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  padding: 0;
  box-shadow: var(--fm-shadow-raised);
}
.family-specific-model svg {
  display: block;
  width: 100%;
  max-height: min(60vh, 380px);
}
.vocab-front-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 8px;
  overflow-y: auto;
  scrollbar-width: none;
}
.vocab-front-body .vocab-term {
  margin: 0;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-lg);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  line-height: var(--fm-lh-ui);
}
.vocab-front-body .vocab-es {
  color: var(--fm-text-muted);
  font-style: italic;
  font-size: var(--fm-fs-xs);
  margin: 3px 0 0 0;
  line-height: var(--fm-lh-ui);
}
.vocab-front-body .vocab-visual-hint {
  font-size: var(--fm-fs-xs);
  background: var(--fm-success-tint);
  color: var(--fm-accent-ink);
  border-left: 3px solid var(--fm-accent);
  padding: 6px 10px;
  border-radius: var(--fm-radius-xs);
  margin-top: 8px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  line-height: var(--fm-lh-body);
}
.flip-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
  padding-top: 10px;
  border-top: 1px dashed var(--fm-info-ink);
  margin-top: auto;
  width: 100%;
}
.flip-prompt .flip-icon {
  font-size: var(--fm-fs-xs);
}
.vocab-card-back {
  background: var(--fm-inverse);
  color: var(--fm-text-inverse);
  border: 1.5px solid var(--fm-border);
  box-shadow: var(--fm-shadow-float);
  padding: 16px 18px;
  justify-content: space-between;
  transform: rotateY(180deg);
}
.vocab-back-header {
  text-align: center;
  border-bottom: 1px solid var(--fm-border);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.vocab-back-badge {
  display: inline-block;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
  background: transparent;
  padding: 2px 8px;
  border-radius: var(--fm-radius-pill);
  margin-bottom: 4px;
}
.vocab-back-term {
  margin: 0;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text-inverse);
  line-height: var(--fm-lh-ui);
}
.vocab-back-term-es {
  color: var(--fm-info-ink);
  font-style: italic;
  font-size: var(--fm-fs-xs);
  margin: 2px 0 0 0;
}
.vocab-back-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  overflow-y: auto;
  padding: 4px 0;
  margin-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--fm-border) transparent;
}
.vocab-back-content::-webkit-scrollbar {
  width: 4px;
}
.vocab-back-content::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--fm-radius-xs);
}
.vocab-def {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  line-height: var(--fm-lh-body);
  color: var(--fm-text-inverse);
  margin: 0 0 8px 0;
}
.vocab-def-es {
  font-size: var(--fm-fs-xs);
  color: var(--fm-highlight-ink);
  line-height: var(--fm-lh-body);
  margin: 0 0 8px 0;
  font-style: italic;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.vocab-def-es .lang-tag {
  display: inline-block;
  background: transparent;
  color: var(--fm-highlight-ink);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  padding: 1px 5px;
  border-radius: var(--fm-radius-xs);
  font-style: normal;
  flex-shrink: 0;
  margin-top: 1px;
}
.vocab-back-visual {
  font-size: var(--fm-fs-xs);
  color: var(--fm-text-inverse);
  background: transparent;
  border-left: 3px solid var(--fm-accent);
  padding: 6px 8px;
  border-radius: var(--fm-radius-xs);
  line-height: var(--fm-lh-ui);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
}
.vocab-btn-gotit, .vocab-btn-review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--fm-radius-sm);
  padding: 7px 12px;
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-heading);
}
.vocab-btn-gotit {
  flex: 1 1 120px;
  max-width: 145px;
  background: var(--fm-success);
  color: var(--fm-on-success);
  border: none;
  font-weight: var(--fm-fw-bold);
  box-shadow: var(--fm-shadow-raised);
}
.vocab-btn-review {
  flex: 1 1 120px;
  max-width: 145px;
  background: transparent;
  color: var(--fm-text-inverse);
  border: 1.5px solid var(--fm-border);
  font-weight: var(--fm-fw-semibold);
  box-shadow: var(--fm-shadow-raised);
}
.flip-back-prompt {
  text-align: center;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  color: var(--fm-text-inverse);
  padding-top: 4px;
}
.vocab-card-front .lang-es, .vocab-card-back .lang-es {
  border-left: none;
  padding-left: 0;
}
.vocab-card-back .vocab-back-term, .vocab-card-back .vocab-back-term .lang-en, .vocab-card-back .vocab-back-term .lang-es {
  color: var(--fm-text-inverse);
}
.vocab-card-back .vocab-back-term-es {
  color: var(--fm-text-inverse);
  margin: 2px 0 0 0;
  font-style: italic;
  font-size: var(--fm-fs-xs);
}
.vocab-card-back .vocab-def-es {
  color: var(--fm-focus-inverse);
  margin: 0 0 8px 0;
  font-style: italic;
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
}
.vocab-card-back-actions .btn .lang-en + .lang-es::before {
  content: " · ";
  opacity: 0.8;
}
.vocab-card-back-actions .btn .lang-es {
  color: inherit;
}
.flip-prompt .lang-en + .lang-es::before, .flip-back-prompt .lang-en + .lang-es::before {
  content: " · ";
  opacity: 0.7;
}
.flip-back-prompt .lang-es {
  color: var(--fm-text-inverse);
}
.flip-prompt .lang-es {
  color: var(--fm-accent-ink);
}
body.lang-mode-es .vocab-card:not(:has(.vocab-def-es)) .vocab-def {
  display: block;
}
.problem-section {
  position: relative;
}
.problem-check-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px solid var(--fm-accent);
}
.btn-check-one {
  align-self: flex-start;
  min-height: 44px;
  font-size: var(--fm-fs-xs);
}
.hw-answer-key {
  margin-top: 12px;
  border: 1.5px dashed var(--fm-success);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-success-tint);
}
.hw-answer-key > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  list-style: none;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  color: var(--fm-success-ink);
}
.hw-answer-key > summary::-webkit-details-marker {
  display: none;
}
.hw-answer-key > summary::after {
  content: "▸";
  margin-left: auto;
}
.hw-answer-key-body {
  padding: 4px 14px 12px;
  color: var(--fm-text);
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
}
.hw-answer-key-label {
  margin: 0 0 6px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-success-ink);
}
.hw-answer-key-try {
  margin: 0 0 8px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.hw-answer-key-lines {
  margin: 0;
  padding-left: 20px;
}
.hw-answer-key-lines li {
  margin: 2px 0;
  font-weight: var(--fm-fw-semibold);
}
.hw-answer-key-note {
  margin: 8px 0 0;
  font-size: var(--fm-fs-xs);
}
.problem-check-result {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  line-height: var(--fm-lh-body);
  padding: 10px 12px;
  border-radius: var(--fm-radius-sm);
  border: 1px solid var(--fm-info-ink);
  background: var(--fm-raised);
  color: var(--fm-text);
  min-height: 0;
}
.problem-check-result:empty {
  display: none;
}
.problem-check-result.is-correct {
  background: var(--fm-success-tint);
  border-color: var(--fm-success);
  color: var(--fm-success-ink);
}
.problem-check-result.is-incorrect {
  background: var(--fm-highlight-tint);
  border-color: var(--fm-highlight);
  color: var(--fm-highlight-ink);
}
.problem-check-result.is-reviewed {
  background: var(--fm-info-tint);
  border-color: var(--fm-info-ink);
  color: var(--fm-text);
}
.problem-section.reviewed {
  border-color: var(--fm-info-ink);
}
.problem-check-result.is-hint {
  background: var(--fm-highlight-tint);
  border-color: var(--fm-highlight);
  color: var(--fm-highlight-ink);
}
.hw-intelligence-card {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--fm-info-ink);
  border-left: 4px solid var(--fm-accent);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
}
.hw-intelligence-card p {
  margin: 4px 0 8px;
  line-height: var(--fm-lh-body);
}
.hw-intelligence-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hw-intelligence-card button {
  min-height: 40px;
}
.hw-intelligence-frame {
  padding: 8px 10px;
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
}
.problem-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--fm-accent);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.hw-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 14px 0 4px;
}
.hw-visual-caption, .hw-work-label {
  display: block;
  font-family: var(--fm-font-text);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  margin-bottom: 6px;
}
.hw-visual-frame {
  border: 1.5px dashed var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  padding: 8px;
  text-align: center;
}
.hw-visual-svg {
  width: 100%;
  height: auto;
  max-height: 180px;
}
.problem-visual-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fm-radius-sm);
  border: 1px solid var(--fm-info-ink);
  display: block;
  margin: 0 auto;
  background: var(--fm-raised);
}
.hw-visual-frame.hw-interactive {
  position: relative;
}
.hw-interactive .ng-hit {
  fill: transparent;
}
.hw-interactive .ng-tick-lbl, .hw-interactive .ng-axis-lbl {
  font-family: var(--fm-font-text);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  fill: var(--fm-text);
}
.hw-interactive .ng-point {
  fill: var(--fm-accent-ink);
  stroke: var(--fm-text);
  stroke-width: 2;
}
.hw-interactive .ng-point.is-open {
  fill: var(--fm-text-inverse);
}
.hw-interactive .ng-ray {
  stroke: var(--fm-accent-ink);
  stroke-width: 5;
  stroke-linecap: round;
}
.hw-interactive .ng-plot {
  fill: var(--fm-accent-ink);
  stroke: var(--fm-text);
  stroke-width: 1.5;
}
.hw-interactive .ng-plot-lbl {
  font-family: var(--fm-font-text);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  fill: var(--fm-text);
}
.hw-interactive .ng-cell {
  fill: transparent;
}
.hw-interactive .ng-cell.is-on {
  fill: var(--fm-accent-ink);
}
.hw-graph-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}
.hw-graph-controls:empty {
  display: none;
}
.hw-graph-controls button {
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  background: var(--fm-raised);
  color: var(--fm-text);
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 6px 11px;
  min-height: 44px;
}
.hw-graph-controls button[aria-pressed="true"] {
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
  border-color: var(--fm-accent);
}
.hw-graph-reset {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  background: var(--fm-raised);
  color: var(--fm-text);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 3px 9px;
}
.hw-graph-readout {
  margin-top: 8px;
  font-family: var(--fm-font-text);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  min-height: 18px;
}
.hw-graph-readout:empty {
  display: none;
}
.hw-work-input {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  background: var(--fm-raised);
  font-family: var(--fm-font-text);
}
.custom-input {
  width: 100%;
  font-family: var(--fm-font-text);
  font-size: var(--fm-fs-sm);
  padding: 10px 14px;
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  color: var(--fm-text);
}
.custom-textarea {
  width: 100%;
  height: 110px;
  font-family: var(--fm-font-text);
  font-size: var(--fm-fs-sm);
  padding: 12px;
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  color: var(--fm-text);
  resize: vertical;
}
.custom-select {
  font-family: var(--fm-font-text);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  padding: 8px 12px;
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  color: var(--fm-text);
  min-width: 150px;
}
.mc-option-label input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.custom-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--fm-info-ink);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.mc-option-label input[type="radio"]:checked ~ .custom-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--fm-raised);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.choice-text {
  flex: 1;
}
.matching-pairs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.matching-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 12px 16px;
  gap: 16px;
}
.matching-term {
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  flex: 1;
}
.matching-select-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.drag-sort-workspace {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.drag-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.drag-column {
  background: var(--fm-raised);
  border: 2px dashed var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  padding: 14px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
}
.drag-column-header {
  font-family: var(--fm-font-display);
  font-weight: var(--fm-fw-bold);
  text-align: center;
  color: var(--fm-text);
  margin-bottom: 12px;
  font-size: var(--fm-fs-xs);
}
.drag-column-slots {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
}
.drag-source-section {
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  padding: 16px;
}
.drag-source-header {
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  margin-bottom: 12px;
}
.drag-source-pile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 60px;
  align-items: center;
  padding: 6px;
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
}
.drag-card {
  background: var(--fm-raised);
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 10px 14px;
  font-weight: var(--fm-fw-bold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--fm-shadow-raised);
}
.drag-card.dragging {
  opacity: 0.55;
}
.drag-column.over, .drag-source-pile.over {
  border-color: var(--fm-accent);
  background: var(--fm-accent-tint);
}
.drag-order-workspace {
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  padding: 12px;
}
.drag-order-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drag-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fm-raised);
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 10px 12px;
}
.drag-order-row.dragging {
  opacity: 0.55;
}
.drag-order-handle {
  color: var(--fm-text);
  font-size: var(--fm-fs-xs);
}
.drag-order-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
  border-radius: 50%;
  font-family: var(--fm-font-display);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
}
.drag-order-text {
  flex: 1;
  font-weight: var(--fm-fw-semibold);
  font-size: var(--fm-fs-sm);
}
.drag-order-controls {
  display: flex;
  gap: 4px;
}
.order-move-btn {
  min-width: 0;
  padding: 4px 10px;
}
.drag-order-row.is-correct {
  border-color: var(--fm-success);
  background: var(--fm-success-tint);
}
.drag-order-row.is-incorrect {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.drag-handle {
  color: var(--fm-text);
  font-size: var(--fm-fs-xs);
}
.mobile-cat-select {
  display: block;
  font-family: var(--fm-font-text);
  font-size: var(--fm-fs-md);
  min-height: 44px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: var(--fm-radius-xs);
  border: 1px solid var(--fm-info-ink);
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--fm-radius-sm);
  border: 1px solid var(--fm-info-ink);
}
.fill-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fm-raised);
  min-width: 560px;
}
.fill-table th, .fill-table td {
  padding: 12px 16px;
  border: 1px solid var(--fm-info-ink);
  text-align: left;
  font-size: var(--fm-fs-sm);
  overflow-wrap: normal;
  word-break: keep-all;
}
.fill-table th {
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  font-family: var(--fm-font-display);
  font-weight: var(--fm-fw-semibold);
}
.fill-table tr:nth-child(even) td {
  background: var(--fm-raised);
}
.fill-cell-label {
  display: none;
}
.hw-workspace-toggle {
  margin-top: 12px;
}
.hw-workspace-toggle > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border: 1.5px dashed var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  list-style: none;
}
.hw-workspace-toggle > summary::-webkit-details-marker {
  display: none;
}
.table-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-input {
  max-width: 180px;
  padding: 6px 10px;
}
.sentence-frame-card {
  background: var(--fm-highlight-tint);
  border: 1px dashed var(--fm-highlight);
  border-radius: var(--fm-radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.sentence-frame-tag {
  font-weight: var(--fm-fw-bold);
  color: var(--fm-highlight-ink);
}
.sentence-frame-text {
  display: block;
  width: 100%;
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-semibold);
  line-height: var(--fm-lh-body);
  text-align: left;
  color: var(--fm-text);
  background: var(--fm-raised);
  border: 1.5px solid var(--fm-highlight);
  border-radius: var(--fm-radius-sm);
  padding: 10px 12px;
}
.click-to-insert-hint {
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.open-response-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.word-bank-container {
  margin-top: 12px;
}
.word-bank-label {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  margin-bottom: 6px;
}
.word-bank-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.word-chip {
  background: var(--fm-accent-tint);
  color: var(--fm-accent-ink);
  border: 1.5px solid var(--fm-accent);
  border-radius: var(--fm-radius-sm);
  padding: 11px 12px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
}
.feedback-badge {
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  margin-left: 6px;
  width: 20px;
  text-align: center;
  display: inline-block;
}
.feedback-badge.success-check::after {
  content: "✓";
  color: var(--fm-success-ink);
}
.feedback-badge.error-cross::after {
  content: "✕";
  color: var(--fm-highlight-ink);
}
.problem-section.correct {
  border-color: var(--fm-success);
}
.problem-section.incorrect {
  border-color: var(--fm-highlight);
}
.explanation-box {
  margin-top: 14px;
  background: var(--fm-success-tint);
  border: 1px solid var(--fm-success);
  color: var(--fm-success-ink);
  border-left: 4px solid var(--fm-success);
  padding: 10px 14px;
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-fs-xs);
}
.custom-input.is-correct, .custom-select.is-correct, .custom-textarea.is-correct {
  border-color: var(--fm-success);
  background: var(--fm-success-tint);
}
.custom-input.is-incorrect, .custom-select.is-incorrect, .custom-textarea.is-incorrect {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.drag-card.is-correct {
  border-color: var(--fm-success);
  background: var(--fm-success-tint);
}
.drag-card.is-incorrect {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.reveal-box {
  background: var(--fm-success-tint);
  border: 1px dashed var(--fm-success);
  color: var(--fm-success-ink);
  padding: 12px;
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-fs-xs);
  margin-top: 10px;
}
.status-bar-wrapper {
  max-width: 840px;
  padding: 0 18px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.sound-toggle-btn {
  background: transparent;
  border: none;
  font-size: var(--fm-fs-lg);
  padding: 8px;
  border-radius: var(--fm-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.score-progress-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 150px;
}
.score-text {
  font-family: var(--fm-font-display);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-sm);
  color: var(--fm-text);
  display: flex;
  justify-content: space-between;
}
.score-text span {
  font-weight: var(--fm-fw-semibold);
  color: var(--fm-text);
}
.progress-bar-outer {
  height: 10px;
  background: var(--fm-raised);
  border-radius: var(--fm-radius-xs);
  overflow: hidden;
  border: 1px solid var(--fm-info-ink);
}
.progress-bar-inner {
  height: 100%;
  width: 0%;
  background: var(--fm-accent-ink);
  border-radius: var(--fm-radius-xs);
  color: var(--fm-on-primary);
}
.action-buttons {
  display: flex;
  gap: 10px;
}
.btn {
  font-family: var(--fm-font-display);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-sm);
  padding: 10px 20px;
  border-radius: var(--fm-radius-sm);
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn .lang-en, .btn .lang-es {
  color: inherit;
}
.btn-secondary {
  background: var(--fm-raised);
  color: var(--fm-text);
  border: 2px solid var(--fm-info-ink);
}
.btn-sm {
  padding: 6px 12px;
  font-size: var(--fm-fs-xs);
}
.parent-quick-card {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--fm-radius-sm);
  background: var(--fm-info-tint);
  border: 1.5px solid var(--fm-info-ink);
}
.parent-quick-title {
  margin: 0 0 6px;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.parent-quick-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-body);
}
.done-summary:empty {
  display: none;
}
.done-summary {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--fm-radius-sm);
  font-weight: var(--fm-fw-semibold);
  line-height: var(--fm-lh-body);
}
.done-summary.is-complete {
  background: var(--fm-success-tint);
  border: 1.5px solid var(--fm-success);
  color: var(--fm-success-ink);
}
.done-summary.is-partial {
  background: var(--fm-highlight-tint);
  border: 1.5px solid var(--fm-highlight);
  color: var(--fm-highlight-ink);
}
.homework-extras-more {
  margin-top: 12px;
}
.homework-extras-more > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border: 1.5px dashed var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.key-idea-banner .btn-read-aloud {
  flex: 0 0 auto;
  white-space: nowrap;
}
.obj-term:hover, .obj-term:focus-visible {
  text-decoration-style: solid;
  background: var(--fm-accent-tint);
  border-radius: var(--fm-radius-xs);
}
.obj-popup-def-es[hidden] {
  display: none;
}
.obj-popup-formal {
  margin: 12px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.obj-popup-formal[hidden] {
  display: none;
}
.obj-popup-formal summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.obj-popup-formal p {
  margin: 6px 0 0;
  line-height: var(--fm-lh-body);
}
.obj-popup-visual[hidden] {
  display: none;
}
.obj-popup-example[hidden] {
  display: none;
}
body.obj-popup-open {
  overflow: hidden;
}
.bilingual-block, .bilingual-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bilingual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.bilingual-col {
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 14px 16px;
}
.lang-label {
  display: inline-block;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
  margin-bottom: 6px;
}
.lang-en {
  margin: 0 0 6px;
}
.step-badge .lang-en, .step-badge .lang-es {
  color: inherit;
}
.lang-en + .lang-es, .worked-step .lang-es {
  padding-left: 10px;
  border-left: 3px solid var(--fm-accent);
}
.learning-words {
  margin-top: 12px;
}
.learning-words-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.learning-word-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.learning-word-chips li {
  padding: 5px 9px;
  border: 1px solid var(--fm-accent);
  border-radius: var(--fm-radius-pill);
  background: var(--fm-accent-tint);
  color: var(--fm-accent-ink);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
}
.guided-section {
  scroll-margin-top: 16px;
}
.section-visual {
  border-left: 4px solid var(--fm-highlight);
}
.quick-check-time {
  background: var(--fm-highlight-tint);
  border: 1px solid var(--fm-highlight);
  border-radius: var(--fm-radius-sm);
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: var(--fm-fs-sm);
}
.section-celebrate {
  border-left: 4px solid var(--fm-highlight);
  background: var(--fm-highlight-tint);
  text-align: center;
}
.concept-svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.concept-fallback-visual {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.concept-fallback-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--fm-radius-sm);
  font-weight: var(--fm-fw-semibold);
  font-size: var(--fm-fs-xs);
}
.step-color-1.guided-step-num {
  background: var(--fm-primary);
  color: var(--fm-on-primary);
}
.step-color-2.guided-step-num {
  background: var(--fm-success);
  color: var(--fm-on-success);
}
.step-color-3.guided-step-num {
  background: var(--fm-highlight);
  color: var(--fm-on-highlight);
}
.step-color-4.guided-step-num {
  background: var(--fm-highlight);
  color: var(--fm-on-highlight);
}
.key-idea-banner {
  background: var(--fm-accent-tint);
  border-radius: var(--fm-radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--fm-accent);
}
.key-idea-banner p {
  margin: 0 0 6px;
  font-size: var(--fm-fs-sm);
}
.key-idea-banner p:last-child {
  margin-bottom: 0;
}
.guided-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.guided-step {
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  padding: 16px;
}
.guided-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.guided-step-head > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.guided-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  font-size: var(--fm-fs-xl);
}
.step-cue-label {
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.step-cue-label .lang-en, .step-cue-label .lang-es {
  display: inline;
  margin: 0;
}
.step-cue-label .lang-es::before {
  content: " / ";
  color: var(--fm-text);
}
.guided-step-head .step-badge {
  margin: 0;
}
.guided-step .step-lead {
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-body);
}
.step-detail {
  margin-top: 10px;
  border-top: 1px dashed var(--fm-info-ink);
  padding-top: 9px;
}
.step-detail summary {
  color: var(--fm-accent-ink);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
}
.step-detail p {
  margin-top: 8px;
  color: var(--fm-text);
  font-weight: var(--fm-fw-regular);
}
.guided-step p {
  margin: 0 0 6px;
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-body);
}
.watch-for-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--fm-raised);
  border-radius: var(--fm-radius-sm);
}
.watch-icon {
  font-size: var(--fm-fs-lg);
  flex-shrink: 0;
}
.stuck-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
.stuck-panel {
  border-radius: var(--fm-radius-sm);
  padding: 14px 16px;
  border: 1px solid var(--fm-info-ink);
}
.stuck-say {
  background: var(--fm-success-tint);
  border-color: var(--fm-success);
}
.stuck-dont {
  background: var(--fm-highlight-tint);
  border-color: var(--fm-highlight);
}
.stuck-heading {
  margin: 0 0 10px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.stuck-panel ul {
  margin: 0;
  padding-left: 16px;
}
.stuck-panel li {
  margin-bottom: 10px;
  font-size: var(--fm-fs-xs);
}
.stuck-panel li p {
  margin: 0 0 4px;
}
.stuck-footer {
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  margin: 0;
}
.celebrate-text {
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  margin: 0 0 8px;
}
.celebrate-sub {
  font-size: var(--fm-fs-xs);
  margin: 0;
}
.problems-container .problem-section {
  border-left: 4px solid var(--fm-accent);
}
.homework-tabs-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.homework-tab-panels {
  min-height: 200px;
}
.tab-panel-inner[hidden] {
  display: none;
}
.tab-panel-inner:not([hidden]) {
  display: block;
}
.homework-tab-extra {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  padding: 7px 10px 6px;
  margin-left: 6px;
  border: 1.5px dashed var(--fm-accent);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-accent-tint);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-heading);
  color: var(--fm-accent-ink);
}
.homework-tab-extra::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  bottom: 10px;
  border-left: 1px solid var(--fm-info-ink);
}
.homework-tab-extra.is-active {
  background: var(--fm-accent-ink);
  border-style: solid;
  border-color: var(--fm-accent);
  color: var(--fm-on-primary);
}
.tab-extra-blurb {
  display: block;
  max-width: 132px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  line-height: var(--fm-lh-heading);
  text-align: center;
  opacity: .85;
}
.tab-extra-blurb .lang-en + .lang-es::before {
  content: none;
}
.tab-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: var(--fm-radius-pill);
  background: var(--fm-info-tint);
  color: var(--fm-text);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
}
.homework-tab-btn.is-done .tab-step {
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
  font-size: var(--fm-fs-xs);
}
.homework-tab-btn.is-done .tab-step::after {
  content: "✓";
  font-size: var(--fm-fs-xs);
}
.tab-icon {
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-heading);
}
.tab-label {
  display: block;
  text-align: center;
}
.tab-es {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
}
.tab-done {
  display: none;
}
.homework-tab-track {
  height: 3px;
  border-radius: var(--fm-radius-pill);
  background: var(--fm-info-tint);
  overflow: hidden;
}
.help-pop-btn {
  margin: 8px 0;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px dashed var(--fm-accent);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-accent-tint);
  color: var(--fm-text);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  width: 100%;
  text-align: left;
}
.tab-help-row {
  margin-top: 12px;
}
.help-topic-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-ish {
  margin-top: 16px;
  padding: 16px;
  background: var(--fm-raised);
  border-radius: var(--fm-radius-sm);
  border: 1px solid var(--fm-info-ink);
}
.help-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--fm-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--fm-text-inverse);
}
.help-modal-overlay[hidden] {
  display: none;
}
.help-modal {
  background: var(--fm-raised);
  border-radius: var(--fm-radius-md);
  padding: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--fm-shadow-float);
  position: relative;
}
.help-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--fm-raised);
  font-size: var(--fm-fs-lg);
}
.help-modal-title {
  margin: 0 32px 12px 0;
  font-family: var(--fm-font-display);
  color: var(--fm-text);
  font-size: var(--fm-fs-lg);
}
.help-modal-body {
  margin: 0 0 10px;
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-body);
}
body.help-modal-open {
  overflow: hidden;
}
.help-modal-visual {
  margin: 0 0 14px;
  padding: 10px;
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  text-align: center;
}
.help-modal-visual[hidden] {
  display: none;
}
.help-modal-frame {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--fm-accent-tint);
  border-left: 4px solid var(--fm-accent);
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
}
.help-modal-frame[hidden] {
  display: none;
}
.help-frame-tag {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.help-frame-es {
  color: var(--fm-text);
}
.ladder-item {
  border: 1px solid var(--fm-info-ink);
  border-left: 4px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 9px 11px;
  background: var(--fm-raised);
}
.ladder-choices {
  margin: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ladder-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-ui);
}
.ladder-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ladder-choice.is-correct {
  border-color: var(--fm-success);
  background: var(--fm-success-tint);
}
.ladder-choice.is-incorrect {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.ladder-feedback {
  margin: 0;
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
}
.ladder-feedback:empty {
  display: none;
}
.ladder-feedback.is-correct {
  color: var(--fm-success-ink);
}
.ladder-feedback.is-incorrect {
  color: var(--fm-highlight-ink);
}
.ladder-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--fm-font-text);
  resize: vertical;
  padding: 7px 10px;
  border: 1.5px dashed var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-fs-xs);
}
.practice-tier {
  margin: 0 0 40px;
}
.practice-tier + .practice-tier {
  margin-top: 0;
  padding-top: 32px;
  border-top: 2px solid var(--fm-info-ink);
}
.practice-tier-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 16px;
  border-radius: var(--fm-radius-md);
}
.practice-tier-basic .practice-tier-head {
  background: var(--fm-highlight-tint);
}
.practice-tier-basic .practice-tier-badge {
  background: var(--fm-highlight);
  color: var(--fm-on-highlight);
}
.practice-tier-warmup .practice-tier-head {
  background: var(--fm-accent-tint);
}
.practice-tier-challenge .practice-tier-head {
  background: var(--fm-highlight-tint);
}
.practice-tier-badge {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fm-font-display);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-lg);
  color: var(--fm-text-inverse);
}
.practice-tier-badge.tier-warmup {
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
}
.practice-tier-badge.tier-challenge {
  background: var(--fm-highlight-ink);
  color: var(--fm-on-primary);
}
.practice-tier-titles {
  min-width: 0;
}
.practice-tier-title {
  margin: 0;
  font-family: var(--fm-font-display);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  font-size: var(--fm-fs-lg);
}
.practice-tier-sub {
  margin: 2px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.workbench-frame-wrap {
  border: 2px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  overflow: hidden;
  background: var(--fm-raised);
}
.arcade-frame {
  display: block;
  width: 100%;
  height: 72vh;
  min-height: 480px;
  border: 0;
}
.more-practice {
  margin-top: 20px;
  border: 2px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  background: var(--fm-accent-tint);
  overflow: hidden;
}
.more-practice > summary {
  list-style: none;
  padding: 14px 18px;
  font-family: var(--fm-font-display);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  font-size: var(--fm-fs-md);
}
.more-practice > summary::-webkit-details-marker {
  display: none;
}
.more-practice-note {
  padding: 12px 18px 0;
  font-size: var(--fm-fs-xs);
}
.more-practice-container {
  padding: 8px 14px 14px;
}
.external-resource-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-lab-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  border: none;
  border-radius: var(--fm-radius-md);
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  text-decoration: none;
  box-shadow: var(--fm-shadow-raised);
}
.ai-lab-emoji {
  font-size: var(--fm-fs-2xl);
  line-height: var(--fm-lh-heading);
  flex: 0 0 auto;
}
.ai-lab-text {
  flex: 1 1 auto;
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
}
.ai-lab-text .lang-es {
  color: var(--fm-text-inverse);
  border-left-color: var(--fm-highlight);
}
.ai-lab-arrow {
  font-size: var(--fm-fs-xl);
  font-weight: var(--fm-fw-bold);
  flex: 0 0 auto;
}
.external-resource-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  text-decoration: none;
  color: inherit;
}
.ext-source {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.ext-title-en {
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.ext-title-es {
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.section-more {
  border-left: 4px solid var(--fm-info-ink);
}
.hw-game {
  padding: 8px 0;
}
.hw-game-title {
  margin: 0 0 8px;
  font-family: var(--fm-font-display);
  color: var(--fm-text);
}
.hw-game-coach {
  font-size: var(--fm-fs-xs);
  margin-bottom: 12px;
}
.hw-game-score {
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
  margin-bottom: 8px;
}
.hw-game-question {
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  margin: 12px 0;
}
.hw-game-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hw-game-choice-btn {
  min-height: 48px;
  padding: 12px 16px;
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-semibold);
  text-align: left;
}
.hw-game-choice-btn.correct {
  border-color: var(--fm-success);
  background: var(--fm-success-tint);
}
.hw-game-choice-btn.incorrect {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.hw-game-feedback {
  margin-top: 12px;
  font-weight: var(--fm-fw-bold);
  min-height: 1.5em;
}
.hw-game-feedback.success {
  color: var(--fm-success-ink);
}
.hw-game-feedback.error {
  color: var(--fm-highlight-ink);
}
.hw-game-buckets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.hw-game-bucket {
  border: 2px dashed var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 10px;
  min-height: 80px;
}
.hw-game-bucket-label {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  margin-bottom: 8px;
  color: var(--fm-text);
}
.hw-game-pile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--fm-raised);
  border-radius: var(--fm-radius-sm);
  margin-bottom: 12px;
}
.hw-game-card {
  padding: 10px 14px;
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.problem-hint-row {
  margin: 8px 0 12px;
}
.obj-popup-translation[hidden] {
  display: none;
}
body.lang-mode-en .bilingual-grid, body.lang-mode-es .bilingual-grid {
  grid-template-columns: 1fr;
}
.parent-signoff-container {
  margin-top: 24px;
  padding: 24px;
  background: var(--fm-raised);
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-lg);
  box-shadow: var(--fm-shadow-float);
  text-align: left;
}
.signoff-title {
  margin: 0 0 16px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-md);
  color: var(--fm-text);
  font-weight: var(--fm-fw-bold);
  border-bottom: 2px solid var(--fm-accent);
  padding-bottom: 8px;
}
.signoff-field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.signoff-field label {
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.checkbox-field {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-body);
  color: var(--fm-text);
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--fm-accent-ink);
}
.signoff-field input[type="text"], .signoff-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  font-family: var(--fm-font-text);
  font-size: var(--fm-fs-xs);
  background: var(--fm-raised);
  color: var(--fm-text);
}
.signoff-submit-btn {
  width: 100%;
  padding: 12px;
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
  border: none;
  border-radius: var(--fm-radius-sm);
}
.signoff-submit-btn:disabled {
  background: var(--fm-info-tint);
  color: var(--fm-text);
}
.certificate-badge {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--fm-accent-tint);
  border: 2px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  padding: 20px;
  margin-bottom: 16px;
}
.cert-check {
  font-size: var(--fm-fs-4xl);
  line-height: var(--fm-lh-heading);
}
.cert-info {
  flex-grow: 1;
}
.cert-header {
  margin: 0 0 4px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-md);
  color: var(--fm-accent-ink);
  font-weight: var(--fm-fw-bold);
}
.cert-detail {
  font-size: var(--fm-fs-md);
  color: var(--fm-text);
  margin: 0 0 2px;
}
.cert-date {
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  margin: 0;
}
.cert-note-box {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--fm-raised);
  border-left: 3px solid var(--fm-highlight);
  text-align: left;
}
.cert-note-title {
  margin: 0 0 4px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-highlight-ink);
}
.cert-note-content {
  margin: 0;
  font-size: var(--fm-fs-xs);
  font-style: italic;
  color: var(--fm-text);
}
.cert-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.print-cert-btn {
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  padding: 10px 18px;
  border-radius: var(--fm-radius-sm);
  font-weight: var(--fm-fw-bold);
}
.edit-signoff-btn {
  color: var(--fm-text);
  font-size: var(--fm-fs-xs);
  text-decoration: underline;
  background: none;
  border: none;
}
.tab-flow-nav {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
.vocab-game-shell {
  background: var(--fm-success-tint);
  border: 2px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: var(--fm-shadow-float);
}
.vocab-game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.vocab-game-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vocab-game-icon {
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-heading);
}
.vocab-game-h3 {
  margin: 0;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.vocab-game-sub {
  margin: 2px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.vocab-game-counter {
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  background: var(--fm-raised);
  padding: 4px 12px;
  border-radius: var(--fm-radius-pill);
  border: 1px solid var(--fm-info-ink);
  color: var(--fm-text);
}
.vocab-quiz {
  background: var(--fm-highlight-tint);
  border: 2px solid var(--fm-highlight);
  border-radius: var(--fm-radius-md);
  padding: 16px 18px;
  margin: 20px 0;
}
.vq-title {
  margin: 0 0 6px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-lg);
  color: var(--fm-text);
}
.vq-star {
  color: var(--fm-text-muted);
}
.vq-star.is-earned {
  color: var(--fm-highlight-ink);
  transform: scale(1.15);
}
.vq-ask {
  margin: 0 0 8px;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-md);
  color: var(--fm-text);
}
.vq-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  padding: 12px 14px;
}
.vq-img {
  width: min(46%, 220px);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  flex: none;
}
.vq-prompt {
  margin: 0;
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
  color: var(--fm-text);
}
.vq-choices {
  display: grid;
  gap: 10px;
  margin: 12px 0 8px;
}
.vq-choice {
  min-height: 56px;
  padding: 10px 16px;
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  color: var(--fm-text);
  text-align: left;
}
.vq-choice.is-right {
  border-color: var(--fm-success);
  background: var(--fm-success-tint);
  color: var(--fm-success-ink);
}
.vq-choice.is-wrong {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
  opacity: .75;
}
.vq-feedback {
  min-height: 24px;
  margin: 4px 0;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-md);
  color: var(--fm-text);
}
.vq-done {
  text-align: center;
  padding: 8px 0;
}
.vq-done-title {
  margin: 0 0 6px;
  color: var(--fm-text);
}
.vq-done-score {
  font-size: var(--fm-fs-lg);
  margin: 0 0 12px;
}
.vocab-match-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.vocab-match-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vocab-match-chip {
  background: var(--fm-raised);
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 9px 12px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  text-align: left;
  box-shadow: var(--fm-shadow-raised);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vocab-match-chip.is-selected {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.vocab-match-chip.is-matched {
  border-color: var(--fm-success);
  background: var(--fm-success-tint);
  color: var(--fm-success-ink);
  opacity: 0.85;
}
.vocab-match-chip.is-mismatch {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.vocab-game-win {
  margin-top: 14px;
  background: var(--fm-raised);
  border-radius: var(--fm-radius-sm);
  padding: 12px 16px;
  border: 1.5px solid var(--fm-success);
}
.win-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.win-emoji {
  font-size: var(--fm-fs-2xl);
}
.win-text strong {
  color: var(--fm-success-ink);
  font-size: var(--fm-fs-sm);
  display: block;
}
.win-text p {
  margin: 2px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.vocab-card-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}
.vocab-speak-btn {
  background: transparent;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius-pill);
  padding: 5px 11px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: var(--fm-lh-heading);
}
.vocab-card-back-actions {
  align-items: center;
  margin-bottom: 6px;
  margin-top: 8px;
  display: flex;
  gap: 10px;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.section-powerup {
  background: var(--fm-raised);
  border: 2px solid var(--fm-info-ink);
  margin-top: 20px;
}
.powerup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.powerup-tag {
  display: inline-block;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-info-ink);
  background: var(--fm-info-tint);
  padding: 3px 8px;
  border-radius: var(--fm-radius-xs);
  margin-bottom: 6px;
}
.powerup-question {
  margin: 0;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  line-height: var(--fm-lh-ui);
}
.powerup-badge-star {
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  background: var(--fm-highlight-tint);
  color: var(--fm-highlight-ink);
  border: 1px solid var(--fm-highlight);
  padding: 3px 10px;
  border-radius: var(--fm-radius-pill);
  white-space: nowrap;
}
.powerup-badge-star.is-unlocked {
  background: var(--fm-success-tint);
  color: var(--fm-success-ink);
  border-color: var(--fm-success);
}
.powerup-choices-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.powerup-choice-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--fm-raised);
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 9px 12px;
  text-align: left;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
}
.powerup-letter {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fm-raised);
  color: var(--fm-text);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.powerup-choice-btn.is-correct {
  border-color: var(--fm-success);
  background: var(--fm-success-tint);
}
.powerup-choice-btn.is-correct .powerup-letter {
  background: var(--fm-success);
  color: var(--fm-on-success);
}
.powerup-choice-btn.is-wrong {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.powerup-feedback-box {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
}
.powerup-feedback-box.is-success {
  background: var(--fm-success-tint);
  color: var(--fm-success-ink);
  border: 1px solid var(--fm-success);
}
.powerup-feedback-box.is-hint {
  background: var(--fm-highlight-tint);
  color: var(--fm-highlight-ink);
  border: 1px solid var(--fm-highlight);
}
.interactive-scratchpad {
  background: var(--fm-raised);
  border: 2px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  padding: 14px;
  margin: 16px 0;
  box-shadow: var(--fm-shadow-float);
}
.scratchpad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.scratchpad-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-sm);
  color: var(--fm-text);
}
.scratchpad-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.color-palette {
  display: flex;
  gap: 6px;
}
.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
}
.color-dot.is-active {
  transform: scale(1.25);
  border-color: var(--fm-border-strong);
}
.tool-btn.is-active {
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
}
.scratchpad-close-btn {
  background: none;
  border: none;
  font-size: var(--fm-fs-lg);
  color: var(--fm-text);
  padding: 0 4px;
}
.scratchpad-canvas-wrap {
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  overflow: hidden;
  background: var(--fm-raised);
}
.scratchpad-hint {
  margin: 6px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.scratchpad-inline-toggle {
  margin: 14px 0;
}
.scratchpad-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.live-streak-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fm-highlight-tint);
  border: 1.5px solid var(--fm-highlight);
  border-radius: var(--fm-radius-pill);
  padding: 6px 14px;
  margin: 10px 0 14px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-highlight-ink);
}
.goal-reached-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--fm-highlight-tint);
  border: 2px solid var(--fm-highlight);
  border-radius: var(--fm-radius-md);
  padding: 12px 16px;
  margin: 12px 0 16px;
  box-shadow: var(--fm-shadow-float);
  flex-wrap: wrap;
}
.goal-icon {
  font-size: var(--fm-fs-2xl);
}
.goal-text strong {
  color: var(--fm-highlight-ink);
  font-size: var(--fm-fs-sm);
  display: block;
}
.goal-text p {
  margin: 2px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-highlight-ink);
}
.high-five-banner {
  text-align: center;
  margin: 18px 0;
}
.btn-high-five {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--fm-highlight);
  color: var(--fm-on-highlight);
  border: none;
  border-radius: var(--fm-radius-pill);
  padding: 10px 24px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  box-shadow: var(--fm-shadow-float);
}
.high-five-emoji {
  font-size: var(--fm-fs-xl);
}
.high-five-labels {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.high-five-labels strong {
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-heading);
}
.high-five-labels small {
  font-size: var(--fm-fs-xs);
  opacity: 0.9;
  font-weight: var(--fm-fw-semibold);
}
.achievement-badge {
  background: var(--fm-raised);
  border: 1.5px dashed var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.55;
}
.achievement-badge.is-unlocked {
  opacity: 1;
  border-style: solid;
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
  box-shadow: var(--fm-shadow-raised);
}
.achieve-icon {
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-heading);
}
.achieve-name {
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.guided-section.card, .card-ish {
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  box-shadow: var(--fm-shadow-float);
  padding: 28px 32px;
  margin-bottom: 24px;
}
.real-world-spotlight {
  background: var(--fm-success-tint);
  border: 1px solid var(--fm-success);
  border-radius: var(--fm-radius-md);
  padding: 14px 18px;
  box-shadow: none;
  margin: 12px 0 0;
}
.spotlight-badge {
  color: var(--fm-success-ink);
  background: var(--fm-success-tint);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
}
.spotlight-title {
  color: var(--fm-text);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
}
.spotlight-text {
  color: var(--fm-text);
  font-size: var(--fm-fs-xs);
}
.misconception-card {
  background: var(--fm-highlight-tint);
  border: 1px solid var(--fm-highlight);
  border-left: 4px solid var(--fm-highlight);
  border-radius: var(--fm-radius-md);
  padding: 14px 18px;
  margin: 0;
}
.mis-trap {
  color: var(--fm-highlight-ink);
}
.parent-coach-tip {
  border-top: 1px dashed var(--fm-highlight);
  color: var(--fm-highlight-ink);
}
.flow-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--fm-inverse);
  border-color: var(--fm-primary);
  color: var(--fm-text-inverse);
  border-radius: var(--fm-radius-pill);
  padding: 10px 24px;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  box-shadow: var(--fm-shadow-float);
}
.problem-card {
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  box-shadow: var(--fm-shadow-float);
  padding: 24px 28px;
  margin-bottom: 24px;
}
body[data-active-tab]:not([data-active-tab="check"]) .bottom-status-bar {
  display: none;
}
.obj-term {
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: var(--fm-accent-ink);
  display: inline;
  margin: 0;
  padding: 1px 5px;
  border: none;
  background: transparent;
  color: var(--fm-accent-ink);
  font-weight: var(--fm-fw-semibold);
  border-bottom: 2px dotted var(--fm-accent);
  border-radius: var(--fm-radius-xs);
  text-decoration: none;
  vertical-align: baseline;
}
.obj-popup-backdrop {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--fm-inverse);
  color: var(--fm-text-inverse);
}
.obj-popup-backdrop:not([hidden]) {
  display: flex;
}
.obj-popup-backdrop[hidden] {
  display: none;
}
.obj-popup {
  position: relative;
  width: min(460px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--fm-raised);
  border-radius: var(--fm-radius-lg);
  box-shadow: var(--fm-shadow-float);
  padding: 32px 24px 24px;
  text-align: center;
  border: 1px solid var(--fm-info-ink);
}
.obj-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--fm-info-tint);
  color: var(--fm-info-ink);
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-heading);
  display: flex;
  align-items: center;
  justify-content: center;
}
.obj-popup-term {
  margin: 0 0 10px;
  font-size: var(--fm-fs-xl);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.obj-popup-translation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 16px;
  padding: 6px 14px;
  background: var(--fm-success-tint);
  border: 1px solid var(--fm-success);
  border-radius: var(--fm-radius-pill);
}
.obj-popup-tr-label {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-success-ink);
}
.obj-popup-tr-es {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-success-ink);
}
.obj-popup-def-es {
  margin: 0 0 16px;
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
  color: var(--fm-text-muted);
  font-style: italic;
  text-align: left;
  padding-top: 8px;
  border-top: 1px dashed var(--fm-info-ink);
}
.obj-popup-visual {
  margin: 16px 0 0;
  padding: 14px;
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
}
.obj-popup-img {
  display: block;
  max-width: 220px;
  max-height: 160px;
  width: auto;
  height: auto;
  margin: 0 auto 10px;
  border-radius: var(--fm-radius-sm);
}
.obj-popup-example {
  margin: 0;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  color: var(--fm-info-ink);
  line-height: var(--fm-lh-body);
}
.hw-stuck-fab {
  position: fixed;
  right: 14px;
  bottom: calc(min(0px, 150px) + 70px);
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--fm-radius-pill);
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  box-shadow: var(--fm-shadow-float);
}
.hw-stuck-fab-icon {
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-heading);
}
.hw-stuck-fab .lang-es {
  color: inherit;
}
.hw-help-drawer {
  position: fixed;
  inset: 0;
  z-index: 1300;
}
.hw-help-drawer[hidden] {
  display: none;
}
.hw-help-drawer-scrim {
  position: absolute;
  inset: 0;
  background: var(--fm-inverse);
  color: var(--fm-text-inverse);
}
.hw-help-drawer-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--fm-raised);
  border-radius: var(--fm-radius-lg) var(--fm-radius-lg) 0 0;
  box-shadow: var(--fm-shadow-sheet);
}
.hw-help-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--fm-info-ink);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-md);
  color: var(--fm-text);
}
.hw-help-drawer-close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--fm-radius-pill);
  background: transparent;
  color: var(--fm-text);
  font-size: var(--fm-fs-lg);
}
.hw-help-drawer-body {
  overflow-y: auto;
  padding: 14px 16px 28px;
}
.hw-help-drawer-body .guided-section.card {
  margin-bottom: 16px;
}
body.hw-drawer-open {
  overflow: hidden;
}
.workbench-drawer {
  margin-top: 18px;
  border: 1.5px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  background: var(--fm-accent-tint);
  overflow: hidden;
}
.workbench-drawer-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 44px;
  list-style: none;
}
.workbench-drawer-summary::-webkit-details-marker {
  display: none;
}
.workbench-drawer-icon {
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-heading);
}
.workbench-drawer-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.workbench-drawer-text strong {
  color: var(--fm-text);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-sm);
}
.workbench-drawer-text small {
  color: var(--fm-text);
  font-size: var(--fm-fs-xs);
}
.workbench-drawer-chevron {
  color: var(--fm-accent-ink);
}
.workbench-drawer-body {
  padding: 4px 16px 18px;
  background: var(--fm-raised);
}
.workbench-quick-launch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--fm-success-tint);
  border: 1.5px solid var(--fm-success);
  border-radius: var(--fm-radius-md);
  padding: 14px 18px;
  margin: 18px 0;
}
.wb-launch-content {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wb-launch-icon {
  font-size: var(--fm-fs-2xl);
  line-height: var(--fm-lh-heading);
  flex-shrink: 0;
}
.wb-launch-text strong {
  display: block;
  color: var(--fm-text);
  font-size: var(--fm-fs-sm);
  margin-bottom: 2px;
}
.wb-launch-text p {
  margin: 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  line-height: var(--fm-lh-body);
}
.wb-launch-btn {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: var(--fm-fw-bold);
}
.wb-tool-bar {
  display: flex;
  gap: 8px;
  padding: 10px 0 14px;
  border-bottom: 1.5px solid var(--fm-info-ink);
  overflow-x: auto;
}
.wb-tool-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--fm-radius-pill);
  border: 1.5px solid var(--fm-info-ink);
  background: var(--fm-raised);
  color: var(--fm-text);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  white-space: nowrap;
}
.wb-tool-tab.is-active {
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  border-color: var(--fm-primary);
}
.tool-presets-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: var(--fm-info-tint);
  border-radius: var(--fm-radius-sm);
  border: 1px solid var(--fm-info-ink);
}
.tool-presets-label {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.wb-preset-btn {
  padding: 4px 10px;
  border-radius: var(--fm-radius-pill);
  border: 1px solid var(--fm-info-ink);
  background: var(--fm-raised);
  color: var(--fm-text);
  font-family: var(--fm-font-text);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
}
.tape-diagram-render {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--fm-raised);
  border-radius: var(--fm-radius-md);
  border: 1px solid var(--fm-info-ink);
}
.tape-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tape-label {
  min-width: 90px;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.tape-blocks {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tape-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 38px;
  border-radius: var(--fm-radius-sm);
  color: var(--fm-text-inverse);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  border: 2px solid var(--fm-border);
}
.tape-block-a {
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
}
.tape-block-b {
  background: var(--fm-highlight);
  color: var(--fm-on-highlight);
}
.dec-grid-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: var(--fm-raised);
  border-radius: var(--fm-radius-md);
  overflow: hidden;
  box-shadow: var(--fm-shadow-raised);
}
.dec-grid-table th {
  padding: 8px 6px;
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  text-align: center;
}
.dec-grid-table th small {
  font-weight: var(--fm-fw-semibold);
  opacity: .8;
  display: block;
}
.dec-grid-table td {
  padding: 6px;
  border: 1px solid var(--fm-info-ink);
  text-align: center;
}
.dec-grid-table .dec-pt {
  font-size: var(--fm-fs-xl);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  width: 20px;
  padding: 0 4px;
}
.dg-cell {
  width: 38px;
  height: 38px;
  text-align: center;
  font-size: var(--fm-fs-lg);
  font-weight: var(--fm-fw-bold);
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-xs);
  color: var(--fm-text);
}
.fam-act-corner {
  margin-top: 22px;
  padding: 20px 22px;
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-lg);
  box-shadow: var(--fm-shadow-raised);
}
.fam-act-badge {
  display: inline-block;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-highlight-ink);
  background: var(--fm-highlight-tint);
  border-radius: var(--fm-radius-pill);
  padding: 5px 12px;
}
.fam-act-lead {
  margin: 10px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.fam-act-card {
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  margin-bottom: 10px;
  overflow: hidden;
}
.fam-act-card[open] {
  border-color: var(--fm-accent);
}
.fam-act-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 44px;
  list-style: none;
}
.fam-act-summary::-webkit-details-marker {
  display: none;
}
.fam-act-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-accent-tint);
  font-size: var(--fm-fs-lg);
}
.fam-act-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.fam-act-titles strong {
  font-size: var(--fm-fs-sm);
  color: var(--fm-text);
}
.fam-act-titles strong .lang-es {
  font-weight: var(--fm-fw-semibold);
}
.fam-act-summary .lang-en + .lang-es {
  border-left: 0;
  padding-left: 0;
  margin-top: 1px;
}
.fam-act-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  font-weight: var(--fm-fw-semibold);
}
.fam-act-chevron {
  margin-left: auto;
  color: var(--fm-text);
}
.fam-act-card[open] .fam-act-chevron {
  transform: rotate(180deg);
}
.fam-act-body {
  padding: 2px 16px 14px;
}
.fam-act-steps {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.fam-act-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px dashed var(--fm-info-ink);
}
.fam-act-step:last-child {
  border-bottom: 0;
}
.fam-act-step p {
  margin: 0;
  font-size: var(--fm-fs-xs);
}
.fam-act-step-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  margin-top: 2px;
}
.fam-act-talk {
  background: var(--fm-accent-tint);
  border-left: 4px solid var(--fm-accent);
  border-radius: var(--fm-radius-sm);
  padding: 10px 12px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.fam-act-talk strong {
  display: block;
  margin-bottom: 4px;
  color: var(--fm-accent-ink);
}
.fam-game-break {
  margin-top: 22px;
  padding: 20px 22px;
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-lg);
  box-shadow: var(--fm-shadow-raised);
}
.fam-game-head {
  margin-bottom: 14px;
}
.fam-game-badge {
  display: inline-block;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-info-ink);
  background: var(--fm-info-tint);
  border-radius: var(--fm-radius-pill);
  padding: 5px 12px;
}
.fam-game-lead {
  margin: 10px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.fam-game-card {
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.fam-game-card:last-child {
  margin-bottom: 0;
}
.fam-game-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.fam-game-h3 {
  margin: 0;
  font-size: var(--fm-fs-md);
  color: var(--fm-text);
}
.fam-game-h3 .lang-es {
  font-weight: var(--fm-fw-semibold);
}
.fam-game-card .lang-en + .lang-es {
  border-left: 0;
  padding-left: 0;
}
.fam-game-sub {
  margin: 8px 0 12px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.fam-dom-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  padding: 12px;
  min-height: 84px;
  background: var(--fm-accent-tint);
  border: 2px dashed var(--fm-accent);
  border-radius: var(--fm-radius-md);
}
.fam-dom-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.fam-dom-tile {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  border: 2px solid var(--fm-primary);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  overflow: hidden;
  text-align: center;
}
.fam-dom-half {
  display: grid;
  place-items: center;
  min-width: 84px;
  max-width: 190px;
  padding: 10px 12px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-ui);
  color: var(--fm-text);
  overflow-wrap: break-word;
}
.fam-dom-left {
  background: var(--fm-highlight-tint);
  border-right: 2px solid var(--fm-primary);
}
.fam-dom-right {
  background: var(--fm-raised);
}
.fam-dom-tile.is-new {
  border-color: var(--fm-success);
}
.fam-dom-slot {
  display: grid;
  place-items: center;
  min-width: 48px;
  border: 2px dashed var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  color: var(--fm-info-ink);
}
.fam-dom-tile.is-wrong {
  border-color: var(--fm-highlight);
}
.fam-dom-hint {
  margin: 10px 0 0;
  min-height: 1.2em;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-highlight-ink);
}
.fam-dom-status {
  margin: 10px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.fam-dom-win {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--fm-success-tint);
  border-left: 4px solid var(--fm-success);
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  color: var(--fm-text);
}
.fam-tf-turn {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
  margin-bottom: 6px;
}
.fam-tf-statement {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--fm-raised);
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-semibold);
  color: var(--fm-text);
}
.fam-tf-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.fam-tf-btn {
  flex: 1 1 140px;
  min-height: 48px;
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  border-radius: var(--fm-radius-md);
  border: 2px solid transparent;
}
.fam-tf-true {
  background: var(--fm-success-tint);
  border-color: var(--fm-success);
  color: var(--fm-success-ink);
}
.fam-tf-false {
  background: var(--fm-highlight-tint);
  border-color: var(--fm-highlight);
  color: var(--fm-highlight-ink);
}
.fam-tf-btn:disabled {
  opacity: .55;
}
.fam-tf-feedback {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--fm-highlight-tint);
  border: 1px solid var(--fm-highlight);
  border-radius: var(--fm-radius-md);
}
.fam-tf-verdict {
  margin: 0 0 6px;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-sm);
}
.fam-tf-verdict.is-right {
  color: var(--fm-success-ink);
}
.fam-tf-verdict.is-wrong {
  color: var(--fm-highlight-ink);
}
.fam-tf-why {
  margin: 0 0 10px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.fam-tf-score {
  margin: 10px 0 0;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.fam-tf-done {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--fm-accent-tint);
  border-left: 4px solid var(--fm-accent);
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-semibold);
  color: var(--fm-text);
}
.fam-arcade-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.fam-arcade-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-pill);
  background: var(--fm-raised);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.fam-arcade-chip.is-active {
  background: var(--fm-primary);
  border-color: transparent;
  color: var(--fm-on-primary);
  box-shadow: var(--fm-shadow-float);
}
.fam-arcade-chip-icon {
  font-size: var(--fm-fs-md);
}
.fam-sort-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 48px;
}
.fam-sort-card {
  padding: 11px 16px;
  min-height: 44px;
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.fam-sort-card.is-picked {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.fam-sort-card.is-placed {
  display: none;
}
.fam-sort-card.is-wrong {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.fam-sort-bins {
  display: flex;
  gap: 10px;
}
.fam-sort-bin {
  flex: 1 1 0;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 14px 12px;
  border: 2px dashed var(--fm-accent);
  border-radius: var(--fm-radius-md);
  background: var(--fm-accent-tint);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.fam-sort-bin-label {
  text-align: center;
  line-height: var(--fm-lh-ui);
}
.fam-sort-bin-count {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--fm-radius-pill);
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
}
.fam-sort-feedback {
  margin: 12px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  min-height: 20px;
}
.fam-sort-done {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--fm-success-tint);
  border-left: 4px solid var(--fm-success);
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.fam-wyr-options {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.fam-wyr-option {
  flex: 1 1 0;
  min-height: 92px;
  padding: 16px 14px;
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-semibold);
  line-height: var(--fm-lh-body);
  color: var(--fm-text);
}
.fam-wyr-option.is-chosen {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.fam-wyr-or {
  align-self: center;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.fam-wyr-reveal {
  margin-top: 14px;
  padding: 13px 15px;
  background: var(--fm-accent-tint);
  border-left: 4px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
}
.fam-wyr-reveal-title {
  margin: 0 0 6px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.fam-wyr-why {
  margin: 0 0 10px;
  font-size: var(--fm-fs-sm);
  color: var(--fm-text);
}
.fam-wyr-progress {
  margin: 12px 0 0;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.family-talk {
  position: relative;
  margin: 20px 0 8px;
  padding: 16px 18px 14px;
  background: var(--fm-raised);
  border: 2px solid var(--fm-highlight);
  border-radius: var(--fm-radius-md);
  color: var(--fm-highlight-ink);
}
.family-talk-lang {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
}
.family-talk-lang button {
  min-width: 44px;
  min-height: 44px;
  border: 2px solid var(--fm-highlight);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  color: var(--fm-highlight-ink);
  font-weight: var(--fm-fw-bold);
}
.family-talk-lang button[aria-pressed="true"] {
  background: var(--fm-highlight-ink);
  color: var(--fm-on-primary);
}
body.lang-mode-en .family-talk .family-talk-pane[lang="es"]:not([hidden]) {
  display: block;
}
body.lang-mode-en .family-talk .family-talk-lang button[lang="es"] {
  display: inline-block;
}
.family-talk-pane {
  padding-right: 104px;
}
.family-talk-pane h3 {
  margin: 0 0 8px;
  font-size: var(--fm-fs-lg);
}
.family-talk-pane .ft-label {
  margin: 10px 0 2px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-highlight-ink);
}
.family-talk-pane p {
  margin: 2px 0;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
}
.family-talk-pane .ft-question {
  font-size: var(--fm-fs-lg);
  font-weight: var(--fm-fw-bold);
}
.family-talk-pane .ft-frame {
  font-style: italic;
}
.question-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 16px;
}
.question-model-card {
  padding: 16px;
  background: var(--fm-raised);
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  min-width: 0;
  color: var(--fm-text);
}
.question-model-card h3, .question-model-card h4 {
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
  margin: 0 0 12px;
}
.question-model-card p {
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
}
[data-family-question-lab] select {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 8px 0 18px;
  padding: 10px;
  color: var(--fm-text);
  background: var(--fm-raised);
  border: 2px solid var(--fm-border-strong);
  border-radius: var(--fm-radius-sm);
}
[data-question-verdict] {
  padding: 12px;
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  background: var(--fm-success-tint);
  border-radius: var(--fm-radius-sm);
}
.visual-lab-heading {
  display: grid;
  grid-template-columns: minmax(240px,.85fr) minmax(260px,1.15fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 20px;
}
.visual-lab-heading h2 {
  margin: 6px 0 0;
  font-size: var(--fm-fs-3xl);
  line-height: var(--fm-lh-heading);
}
.visual-lab-heading p {
  margin: 0;
  padding: 14px 16px;
  border-left: 5px solid var(--fm-highlight);
  background: var(--fm-highlight-tint);
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-body);
}
.visual-lab-kicker {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: var(--fm-radius-pill);
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
}
.visual-lab-kicker .lang-en, .visual-lab-kicker .lang-es {
  color: inherit;
}
.visual-lab-stage {
  display: grid;
  place-items: center;
  min-height: 280px;
}
.visual-coach-box {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  border: 1.5px solid var(--fm-border);
}
.visual-coach-box strong {
  display: block;
  margin-bottom: 3px;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.visual-coach-q {
  margin: 0;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-ui);
  color: var(--fm-text);
  font-style: italic;
}
.visual-representation-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}
.visual-representation-card {
  position: relative;
  min-height: 150px;
  padding: 18px 16px 15px;
  border: 2px solid var(--fm-primary);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
}
.visual-representation-card h3 {
  margin: 0 0 10px;
  padding-left: 30px;
  font-size: var(--fm-fs-md);
}
.visual-representation-card p {
  margin: 7px 0;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
}
.representation-number {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  font-weight: var(--fm-fw-bold);
}
.visual-representation-math [data-lab-equation] {
  font-size: var(--fm-fs-3xl);
  font-weight: var(--fm-fw-bold);
  text-align: center;
}
.mini-dot {
  width: 18px;
  height: 18px;
  border: 2px solid var(--fm-primary);
  border-radius: 50%;
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
}
.lab-label {
  fill: var(--fm-text);
}
.lab-small {
  fill: var(--fm-text);
}
.lab-big {
  fill: var(--fm-text);
}
.lab-grid {
  stroke: var(--fm-success-ink);
  stroke-width: 1;
}
.lab-axis {
  stroke: var(--fm-text);
  stroke-width: 3;
}
.lab-accent {
  fill: var(--fm-highlight-ink);
  stroke: var(--fm-text);
  stroke-width: 2;
}
.lab-teal {
  fill: var(--fm-accent-ink);
  stroke: var(--fm-text);
  stroke-width: 2;
}
.lab-sun {
  fill: var(--fm-highlight-ink);
  stroke: var(--fm-text);
  stroke-width: 2;
}
.visual-lab-lang-note {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-highlight-tint);
  border: 1px solid var(--fm-highlight);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
}
[data-lesson-model-host] {
  display: block;
  min-height: 300px;
  padding: 16px;
  border: 2px solid var(--fm-primary);
  border-radius: var(--fm-radius-lg);
  background: var(--fm-success-tint);
  overflow: auto;
}
[data-lesson-model-host]>.interactive-visual {
  width: 100%;
  margin: 0;
}
[data-lesson-model] .visual-representation-card p {
  font-weight: var(--fm-fw-bold);
}
.card {
  background: var(--fm-raised);
  margin-bottom: 20px;
  border-radius: var(--fm-radius-lg);
  padding: 26px 28px;
  border: 1px solid var(--fm-info-ink);
  box-shadow: var(--fm-shadow-raised);
}
.worked-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--fm-radius-md);
  border: 1px solid var(--fm-info-ink);
  background: var(--fm-raised);
  margin-bottom: 10px;
}
.worked-step.highlighted {
  background: var(--fm-highlight-tint);
  border-color: var(--fm-highlight);
  box-shadow: var(--fm-shadow-float);
}
.step-badge {
  background: var(--fm-primary);
  line-height: var(--fm-lh-heading);
  display: inline-block;
  font-family: var(--fm-font-display);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text-inverse);
  margin-bottom: 8px;
  font-size: var(--fm-fs-xs);
  padding: 4px 9px;
  border-radius: var(--fm-radius-pill);
  align-self: center;
}
.lang-es {
  margin: 0;
  font-style: normal;
  color: var(--fm-text);
}
.worked-step .lang-es, .lang-en + .lang-es {
  display: block;
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--fm-accent);
}
.watch-for-list {
  list-style: none;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--fm-highlight-tint);
  border: 1px solid var(--fm-highlight);
  border-left: 4px solid var(--fm-highlight);
  border-radius: var(--fm-radius-md);
  padding: 14px 16px;
}
.vocab-card-inner, .vocab-card-front, .vocab-card-back {
  border-radius: var(--fm-radius-md);
}
.vocab-card-front, .vocab-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--fm-radius-md);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: var(--fm-shadow-raised);
  border: 1px solid var(--fm-info-ink);
}
.guided-section.card, .card-ish, .card {
  border-radius: var(--fm-radius-lg);
  border: 1px solid var(--fm-info-ink);
  box-shadow: var(--fm-shadow-raised);
}
.fam-act-badge, .fam-game-badge, .spotlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  background: var(--fm-highlight-tint);
  border: 1px solid var(--fm-highlight);
  border-radius: var(--fm-radius-pill);
  padding: 6px 14px;
}
.fam-act-meta .lang-es {
  display: inline;
}
button .lang-en + .lang-es, summary .lang-en + .lang-es {
  display: inline;
  border-left: 0;
  padding-left: 0;
  margin-top: 0;
}
button .lang-en + .lang-es::before, summary .lang-en + .lang-es::before {
  content: "·";
  margin: 0 6px;
  opacity: .6;
}
body.lang-mode-en .lang-en + .lang-es::before, body.lang-mode-es .lang-en + .lang-es::before {
  content: none;
}
.section-title {
  margin: 0 0 16px 0;
  margin-top: 0;
  display: flex;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xl);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-heading);
  color: var(--fm-text);
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--fm-info-ink);
  flex-wrap: wrap;
  row-gap: 2px;
}
.section-title .lang-es {
  flex: 0 0 100%;
  margin-top: 1px;
  padding-left: 18px;
  border-left: 0;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  color: var(--fm-accent-ink);
}
.btn-listen-concept {
  background: var(--fm-info-tint);
  color: var(--fm-text);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-pill);
  padding: 5px 14px;
  font-weight: var(--fm-fw-bold);
  box-shadow: var(--fm-shadow-raised);
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
  font-size: var(--fm-fs-xs);
}
.family-plain-start {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin: 4px 0 16px;
  padding: 16px;
  border: 2px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  background: var(--fm-accent-tint);
}
.family-plain-start-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  color: var(--fm-accent-ink);
  font-size: var(--fm-fs-xl);
}
.family-plain-start strong {
  display: block;
  margin: 0 0 5px;
  font-size: var(--fm-fs-md);
}
.family-plain-start strong .lang-en,
.family-plain-start strong .lang-es {
  display: inline;
}
.family-plain-start strong .lang-es::before {
  content: "";
}
.family-plain-start p {
  margin: 0;
  font-size: var(--fm-fs-lg);
  font-weight: var(--fm-fw-semibold);
  line-height: var(--fm-lh-body);
}
.family-plain-start p + p {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--fm-border-strong);
}
.family-plain-start .btn-read-aloud {
  min-height: 44px;
  align-self: center;
}
.family-why {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--fm-border-strong);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
}
.family-why summary {
  min-height: 28px;
  cursor: pointer;
  font-weight: var(--fm-fw-bold);
}
.family-why p {
  margin: 12px 0 0;
  line-height: var(--fm-lh-body);
}
.hw-mm-howto {
  margin: 12px 0;
  padding: 12px 14px;
  border-inline-start: 4px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-xs);
  background: var(--fm-info-tint);
  line-height: var(--fm-lh-body);
}
.hw-mm-frame {
  display: block;
  margin-top: 6px;
  font-weight: var(--fm-fw-bold);
}
.fp-example > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
@media (max-width: 42rem) {
  .family-plain-start {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .family-plain-start .btn-read-aloud {
    grid-column: 2;
    justify-self: start;
  }
}
.concept-visual-wrap {
  overflow-x: auto;
  display: flex;
  justify-content: center;
  margin: 4px 0 20px;
  padding: 22px 18px;
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
}
.concept-visual-wrap > svg {
  width: 100%;
  max-width: 560px;
  height: auto;
}
body #nsr-root {
  bottom: calc(min(0px, 150px) + 14px);
}
body #mwb-launcher, body .mwb-launcher {
  display: none;
}
h1, h2, h3, h4, header.packet h1, .section>h2, .topbar .brand {
  font-family: var(--fm-font-display);
}
header.packet h1 {
  position: relative;
}
header.packet h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 8px;
  background: var(--fm-accent-ink);
  border-radius: var(--fm-radius-xs);
  color: var(--fm-on-primary);
}
.big-idea {
  margin-top: 4px;
}
.concept-title-es {
  display: none;
}
body.lang-mode-es .concept-title-es {
  display: inline;
}
.big-idea .key-idea-banner {
  padding: 20px 22px;
  border: 2px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  margin: 4px 0 20px;
}
.big-idea .key-idea-banner p {
  margin: 0;
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-body);
  font-weight: var(--fm-fw-semibold);
}
.big-idea .key-idea-banner .lang-en + .lang-es {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 4px solid var(--fm-accent);
}
.big-idea .concept-visual-wrap {
  display: block;
  margin: 0 0 22px;
  padding: 20px 18px;
  overflow: visible;
}
.big-idea .concept-visual-wrap > svg, .big-idea .concept-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--fm-radius-md);
}
.concept-visual-caption {
  margin: 12px 2px 0;
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
  font-weight: var(--fm-fw-semibold);
  color: var(--fm-text);
  text-align: center;
}
.concept-visual-caption .lang-es {
  display: block;
  margin-top: 8px;
  padding-left: 14px;
  border-left: 4px solid var(--fm-accent);
  text-align: left;
}
.concept-visual-caption .lang-en {
  display: block;
}
.concept-zoom-dialog {
  width: min(100vw - 16px, 960px);
  max-height: 92vh;
  padding: 10px;
  border: 3px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
}
.concept-zoom-dialog::backdrop {
  background: var(--fm-inverse);
  color: var(--fm-text-inverse);
}
.concept-zoom-close {
  display: block;
  min-height: 48px;
  margin: 0 0 8px auto;
  padding: 8px 18px;
  border: 2px solid var(--fm-accent);
  border-radius: var(--fm-radius-pill);
  background: var(--fm-raised);
  color: var(--fm-accent-ink);
}
.concept-zoom-body {
  max-height: calc(92vh - 90px);
  overflow: auto;
}
.concept-zoom-body svg {
  display: block;
  width: 780px;
  max-width: none;
  height: auto;
}
.big-idea .concept-fallback-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
}
.big-idea .concept-fallback-step {
  display: block;
  padding: 20px 22px;
  border-radius: var(--fm-radius-md);
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-body);
  font-weight: var(--fm-fw-semibold);
  background: var(--fm-raised);
  border: 2px solid var(--fm-info-ink);
}
.big-idea .concept-fallback-step.is-end {
  background: var(--fm-accent-tint);
  border-color: var(--fm-accent);
}
.concept-fallback-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.concept-fallback-label .lang-es {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
}
.concept-fallback-label .lang-es::before {
  content: " · ";
}
.concept-fallback-text {
  display: block;
}
.concept-fallback-text.lang-es {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 4px solid var(--fm-accent);
}
.concept-fallback-arrow {
  align-self: center;
  font-size: var(--fm-fs-4xl);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.big-idea .guided-steps {
  gap: 10px;
}
.big-idea .guided-step {
  padding: 12px 16px;
  border: 1px solid var(--fm-info-ink);
  border-left: 5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
}
.big-idea .guided-step.step-color-1 {
  border-left-color: var(--fm-info-ink);
}
.big-idea .guided-step.step-color-2 {
  border-left-color: var(--fm-success);
}
.big-idea .guided-step.step-color-3 {
  border-left-color: var(--fm-highlight);
}
.big-idea .guided-step.step-color-4 {
  border-left-color: var(--fm-highlight);
}
.big-idea .guided-step-head {
  gap: 10px;
  margin-bottom: 6px;
  align-items: center;
}
.guided-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-lg);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-on-primary);
  background: var(--fm-primary);
}
.big-idea .step-cue-label {
  font-size: var(--fm-fs-md);
}
.big-idea .guided-step-icon {
  display: inline;
  width: auto;
  height: auto;
  flex: none;
  background: none;
  border-radius: 0;
  font-size: var(--fm-fs-lg);
  margin-right: 6px;
}
.big-idea .step-badge {
  display: none;
}
.big-idea .step-cue-label .lang-es, .big-idea .step-detail summary .lang-es {
  display: inline;
  margin: 0;
  padding-left: 0;
  border-left: 0;
}
.big-idea .step-detail summary .lang-es::before {
  content: " · ";
  color: var(--fm-text);
}
.big-idea .guided-step .step-lead {
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
  font-weight: var(--fm-fw-semibold);
  margin: 0;
}
.big-idea .guided-step .step-lead.lang-es {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 3px solid var(--fm-accent);
}
.big-idea .step-detail {
  margin-top: 6px;
  padding-top: 6px;
}
.big-idea .step-detail summary {
  font-size: var(--fm-fs-xs);
}
.big-idea .step-detail p {
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-body);
}
.big-idea .watch-for-list {
  padding: 18px 20px;
  margin-top: 20px;
}
.big-idea .watch-for-list li {
  gap: 14px;
}
.big-idea .watch-for-list p {
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
  margin: 0;
}
.big-idea .watch-for-list .lang-en + .lang-es {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 4px solid var(--fm-accent);
}
.big-idea .watch-icon {
  font-size: var(--fm-fs-2xl);
}
.homework-tab-track-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--fm-radius-pill);
  background: var(--fm-highlight);
  color: var(--fm-on-highlight);
}
.btn, .flow-next-btn, .signoff-submit-btn {
  border-radius: var(--fm-radius-md);
  font-weight: var(--fm-fw-bold);
}
.btn-primary, .flow-next-btn {
  background: var(--fm-inverse);
  border-color: var(--fm-primary);
  color: var(--fm-text-inverse);
}
.btn:disabled {
  opacity: .45;
  transform: none;
  box-shadow: none;
}
.problem-section.card, .fam-game-card, .fam-act-card, .vocab-card-front, .vocab-card-back {
  border-radius: var(--fm-radius-lg);
  box-shadow: var(--fm-shadow-float);
}
.bottom-status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  z-index: 1000;
  background: var(--fm-inverse);
  color: var(--fm-text-inverse);
  border-top: 0;
  box-shadow: var(--fm-shadow-inset);
}
.btn-read-aloud {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--fm-accent-tint);
  color: var(--fm-accent-ink);
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius-pill);
  padding: 3px 10px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  vertical-align: middle;
}
.btn-read-aloud.is-speaking {
  background: var(--fm-highlight);
  color: var(--fm-on-highlight);
}
.feeling-options .btn-feeling.is-selected {
  border-color: var(--fm-info-ink);
  background: var(--fm-info-tint);
  color: var(--fm-info-ink);
}
.work-photo-preview-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-photobooth [hidden] {
  display: none;
}
.section-photobooth {
  padding: 24px;
  background: var(--fm-raised);
  border-radius: var(--fm-radius-md);
  border: 1px solid var(--fm-info-ink);
  box-shadow: var(--fm-shadow-float);
}
.photobooth-header {
  margin-bottom: 20px;
}
.photobooth-badge {
  display: inline-block;
  background: var(--fm-highlight-tint);
  color: var(--fm-highlight-ink);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  padding: 4px 12px;
  border-radius: var(--fm-radius-pill);
  margin-bottom: 8px;
}
.photobooth-sub {
  font-size: var(--fm-fs-sm);
  color: var(--fm-info-ink);
  line-height: var(--fm-lh-body);
  margin-top: 6px;
}
.photobooth-container {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
.pb-stage-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pb-viewfinder {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--fm-inverse);
  border-radius: var(--fm-radius-md);
  overflow: hidden;
  box-shadow: var(--fm-shadow-float);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fm-text-inverse);
}
.pb-viewfinder.card-ish {
  background: var(--fm-inverse);
  padding: 0;
  margin: 0;
  color: var(--fm-text-inverse);
}
#pb_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#pb_video.is-mirrored {
  transform: scaleX(-1);
}
#pb_captured_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
.pb-frame-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.frame-champion {
  border: 14px solid var(--fm-highlight);
}
.frame-champion .pb-frame-header {
  background: var(--fm-highlight);
  color: var(--fm-on-highlight);
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
}
.frame-champion .pb-frame-footer {
  background: var(--fm-inverse);
  color: var(--fm-text-inverse);
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
}
.pb-stickers-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 48px 24px;
  gap: 12px;
}
.pb-sticker-stamp {
  font-size: var(--fm-fs-3xl);
}
.pb-idle-placeholder {
  position: absolute;
  inset: 0;
  background: var(--fm-inverse);
  color: var(--fm-text-inverse);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.pb-idle-icon {
  font-size: var(--fm-fs-4xl);
  margin-bottom: 12px;
}
.pb-idle-sub {
  font-size: var(--fm-fs-xs);
  color: var(--fm-info-ink);
  max-width: 280px;
  margin-bottom: 18px;
}
.pb-countdown-overlay {
  position: absolute;
  inset: 0;
  background: var(--fm-inverse);
  color: var(--fm-text-inverse);
  font-size: var(--fm-fs-4xl);
  font-weight: var(--fm-fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.pb-flash-layer {
  position: absolute;
  inset: 0;
  background: var(--fm-raised);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
}
.pb-status {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--fm-radius-sm);
  border: 1px solid var(--fm-info-ink);
  background: var(--fm-info-tint);
  color: var(--fm-info-ink);
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
  font-weight: var(--fm-fw-semibold);
}
.pb-controls-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pb-actions-live, .pb-actions-review {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.pb-btn-snap {
  flex: 2;
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  padding: 10px 16px;
  background: var(--fm-success);
  border-color: var(--fm-success);
  color: var(--fm-on-success);
}
.pb-btn-flip, .pb-btn-upload {
  flex: 1;
  font-size: var(--fm-fs-xs);
}
.pb-btn-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}
.pb-btn-snap, .pb-btn-flip {
  justify-content: center;
  text-align: center;
}
.pb-customizer {
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  padding: 18px;
}
.pb-custom-title {
  margin: 0 0 14px;
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.pb-custom-section {
  margin-bottom: 16px;
}
.pb-custom-label {
  display: block;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
  margin-bottom: 6px;
}
.pb-frame-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pb-frame-btn {
  padding: 6px 10px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  border-radius: var(--fm-radius-sm);
  border: 1.5px solid var(--fm-info-ink);
  background: var(--fm-raised);
}
.pb-frame-btn.is-selected {
  border-color: var(--fm-info-ink);
  background: var(--fm-info-tint);
  color: var(--fm-info-ink);
}
.pb-stickers-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pb-sticker-chip {
  padding: 5px 8px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  border-radius: var(--fm-radius-xs);
  border: 1px solid var(--fm-info-ink);
  background: var(--fm-raised);
}
.pb-sticker-chip.is-selected {
  border-color: var(--fm-info-ink);
  background: var(--fm-info-tint);
  color: var(--fm-info-ink);
}
.pb-tip-box {
  display: flex;
  gap: 10px;
  background: var(--fm-info-tint);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 10px 12px;
  margin-top: 14px;
}
.pb-tip-icon {
  font-size: var(--fm-fs-lg);
  flex-shrink: 0;
}
.pb-tip-text {
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
  color: var(--fm-info-ink);
  margin: 0;
}
.pb-print-portal {
  display: none;
}
html [hidden] {
  display: none;
}
.homework-tab-btn[hidden], .homework-tab-extra[hidden], .problem-section[hidden], .practice-tier[hidden], .more-practice[hidden] {
  display: none;
}
.problem-coach-ladder {
  width: 100%;
  border: 1px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  background: var(--fm-accent-tint);
  overflow: hidden;
}
.problem-coach-ladder > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 9px 12px;
  color: var(--fm-accent-ink);
  font-weight: var(--fm-fw-bold);
  list-style: none;
}
.problem-coach-ladder > summary::-webkit-details-marker {
  display: none;
}
.problem-coach-ladder > summary small {
  color: var(--fm-text-muted);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
}
.coach-ladder-list {
  margin: 0;
  padding: 0 12px 12px;
  list-style: none;
}
.coach-ladder-step {
  border-top: 1px solid var(--fm-accent);
}
.coach-ladder-step > button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 7px 0;
  text-align: left;
  color: var(--fm-accent-ink);
  background: transparent;
  border: 0;
  font-weight: var(--fm-fw-bold);
}
.coach-step-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--fm-on-primary);
  background: var(--fm-accent-ink);
  border-radius: 50%;
  font-size: var(--fm-fs-xs);
}
.coach-step-help {
  padding: 0 0 11px 33px;
  color: var(--fm-text);
}
.coach-step-help p {
  margin: 0;
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
}
.coach-ladder-step.is-revealed > button {
  color: var(--fm-accent-ink);
}
.coach-scratchpad-btn {
  margin-top: 8px;
  padding: 7px 10px;
  color: var(--fm-text);
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  font-weight: var(--fm-fw-bold);
}
.fam-act-head {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.family-mission-status {
  margin: -4px 0 12px;
  padding: 8px 10px;
  color: var(--fm-info-ink);
  background: var(--fm-raised);
  border-radius: var(--fm-radius-sm);
  font-size: var(--fm-fs-xs);
}
.fam-mission-complete {
  min-height: 42px;
  padding: 8px 12px;
  color: var(--fm-accent-ink);
  background: var(--fm-raised);
  border: 1.5px solid var(--fm-accent);
  border-radius: var(--fm-radius-sm);
  font-weight: var(--fm-fw-bold);
  margin-top: 12px;
}
.fam-mission-check {
  margin-right: 5px;
}
.fam-act-card.is-mission-complete {
  border-color: var(--fm-success);
  background: var(--fm-success-tint);
}
.fam-mission-complete.is-complete {
  color: var(--fm-on-success);
  background: var(--fm-success);
  border-color: var(--fm-success);
}
.achievement-shelf {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.family-mission-alternatives > summary {
  min-height: 44px;
  padding: 10px 0;
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
}
.homework-message-action {
  margin: 16px 0;
}
.homework-message-action p, .homework-optional-extras > p {
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
}
.homework-optional-extras {
  margin-top: 24px;
  border-top: 1px solid var(--fm-info-ink);
}
.homework-optional-extras h3 {
  margin: 18px 0 6px;
  font-size: var(--fm-fs-xl);
  color: var(--fm-text);
}
.homework-extra-actions {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin: 16px 0 22px;
}
.homework-extra-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 10px;
  text-align: center;
  white-space: normal;
  font-size: var(--fm-fs-md);
}
.done-problem-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 0;
  list-style: none;
}
.done-problem-list:empty {
  display: none;
}
.done-problem-chip {
  min-width: 48px;
  min-height: 48px;
  padding: 6px 12px;
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  color: var(--fm-text);
}
.done-problem-chip.is-done {
  border-color: var(--fm-accent);
  background: var(--fm-accent-tint);
  color: var(--fm-accent-ink);
}
.watch-for-summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  color: var(--fm-accent-ink);
  font-weight: var(--fm-fw-bold);
}
.mathpad {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: var(--fm-raised);
  border-top: 2px solid var(--fm-accent);
  box-shadow: var(--fm-shadow-sheet);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  font-family: var(--fm-font-display);
}
.mathpad[hidden] {
  display: none;
}
.mathpad-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mathpad-preview-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  background: var(--fm-accent-tint);
  border-radius: var(--fm-radius-sm);
  overflow: hidden;
}
.mathpad-preview-tag {
  flex: none;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.mathpad-preview {
  flex: 1;
  min-width: 0;
  font-size: var(--fm-fs-lg);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.mathpad-preview::-webkit-scrollbar {
  display: none;
}
.mathpad-preview:empty::before {
  content: "…";
  color: var(--fm-text);
  font-weight: var(--fm-fw-semibold);
}
.mathpad-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  line-height: var(--fm-lh-heading);
  font-size: var(--fm-fs-xs);
  margin: 0 2px;
}
.mathpad-frac-den {
  border-top: 1.5px solid currentColor;
  padding-top: 1px;
}
.mathpad-top-actions {
  display: flex;
  gap: 6px;
  flex: none;
}
.mathpad-util {
  min-width: 46px;
  min-height: 42px;
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  color: var(--fm-text);
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
}
.mathpad-hide {
  border-color: var(--fm-highlight);
  color: var(--fm-highlight-ink);
}
.mathpad-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  overflow-x: auto;
}
.mathpad-tab {
  flex: none;
  padding: 7px 12px;
  min-height: 38px;
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-pill);
  background: var(--fm-raised);
  color: var(--fm-text);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  white-space: nowrap;
}
.mathpad-tab.is-active {
  background: var(--fm-primary);
  border-color: var(--fm-primary);
  color: var(--fm-on-primary);
}
.mathpad-keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 6px;
}
.mathpad-keys[hidden] {
  display: none;
}
.mathpad-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 46px;
  padding: 4px 6px;
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  color: var(--fm-text);
}
.mathpad-key-glyph {
  font-size: var(--fm-fs-lg);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-heading);
}
.mathpad-key-wide {
  grid-column: span 2;
}
.mathpad-key-hint {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  line-height: var(--fm-lh-heading);
  text-align: center;
}
.mathpad-key-hint .lang-en + .lang-es::before {
  content: none;
}
.mathpad-fab {
  position: fixed;
  left: 14px;
  bottom: calc(min(0px, 150px) + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: 46px;
  border: none;
  border-radius: var(--fm-radius-pill);
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  box-shadow: var(--fm-shadow-float);
}
.mathpad-fab[hidden] {
  display: none;
}
.mathpad-fab-glyph {
  font-size: var(--fm-fs-md);
}
body.mathpad-open .bottom-status-bar {
  bottom: 0px;
}
body.mathpad-open .hw-stuck-fab {
  bottom: calc(min(0px, 150px) + 70px + 0px);
}
body.mathpad-open #nsr-root {
  bottom: calc(min(0px, 150px) + 14px + 0px);
}
.mc-option-label, .choice-text {
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-body);
}
.learning-big {
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  margin: 0 0 8px;
  font-size: var(--fm-fs-2xl);
  line-height: var(--fm-lh-body);
}
.bilingual-col, .worked-step, .watch-for-list {
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-body);
}
.custom-input, .custom-textarea {
  font-size: var(--fm-fs-xl);
}
.btn-primary, .btn-secondary, .btn-check-one {
  font-size: var(--fm-fs-xl);
}
.feedback-box, .explanation-box {
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-body);
}
.obj-popup-def {
  margin: 0 0 10px;
  color: var(--fm-text);
  text-align: left;
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-body);
}
.container {
  margin: 0 auto;
  padding: 28px 20px 44px;
  max-width: 1120px;
}
.family-visual-lab {
  padding: clamp(18px,3vw,30px);
  color: var(--fm-text);
  margin: 0;
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  box-shadow: var(--fm-shadow-raised);
  background: var(--fm-raised);
}
.family-visual-lab .visual-lab-heading, .family-visual-lab .visual-representation-grid {
  grid-template-columns: minmax(0, 1fr);
}
.family-visual-lab .visual-representation-card {
  min-height: 0;
}
.family-visual-lab h2, .family-visual-lab h3 {
  font-family: var(--fm-font-display);
  color: var(--fm-text);
}
.homework-tab-chrome {
  top: 0;
  border-bottom: 1px solid var(--fm-info-ink);
  overflow: hidden;
  margin-bottom: 26px;
  margin-top: -26px;
  padding: 9px 9px 7px;
  position: relative;
  z-index: 5;
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  box-shadow: var(--fm-shadow-raised);
}
.homework-tab-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 9px 12px;
  background: transparent;
  gap: 4px;
}
.homework-tab-btn .tab-icon {
  display: none;
}
.homework-tab-btn .tab-step {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fm-info-tint);
  color: var(--fm-text);
  font-weight: var(--fm-fw-bold);
}
.homework-tab-btn.is-active {
  border-color: var(--fm-primary);
  color: var(--fm-text);
  box-shadow: var(--fm-shadow-float);
  background: var(--fm-accent-tint);
  border-bottom-color: var(--fm-accent);
}
.homework-tab-btn.is-active .tab-step {
  background: var(--fm-primary);
  color: var(--fm-on-primary);
}
.tab-panel-inner > .section-title, .tab-panel-inner .section-title {
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-left: 5px solid var(--fm-primary);
  border-radius: var(--fm-radius-md);
  padding: 14px 20px;
  font-family: var(--fm-font-display);
  color: var(--fm-text);
  box-shadow: var(--fm-shadow-raised);
}
.section-title::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fm-highlight);
  align-self: center;
  color: var(--fm-on-highlight);
  display: none;
}
.card, .problem-section.card, .guided-section.card {
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  box-shadow: var(--fm-shadow-raised);
}
.problem-number-badge {
  font-family: var(--fm-font-display);
  color: var(--fm-accent-ink);
  background: transparent;
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
}
.problem-type-badge {
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  padding: 4px 10px;
  background: var(--fm-info-tint);
  color: var(--fm-text);
  border-radius: var(--fm-radius-pill);
}
.problem-stem {
  margin: 0 0 18px 0;
  line-height: var(--fm-lh-body);
  font-size: var(--fm-fs-xl);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.mc-options {
  flex-direction: column;
  counter-reset: st-choice;
  display: grid;
  gap: 10px;
}
.mc-option-label {
  font-weight: var(--fm-fw-semibold);
  position: relative;
  counter-increment: st-choice;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--fm-info-tint);
  border: 2px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  padding: 12px 16px;
  font-size: var(--fm-fs-xl);
}
.mc-option-label .custom-radio {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--fm-primary);
  background: var(--fm-raised);
  display: grid;
  place-items: center;
}
.mc-option-label .custom-radio::before {
  content: counter(st-choice, upper-alpha);
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.mc-option-label .custom-radio::after {
  display: none;
}
.mc-option-label input[type="radio"]:checked ~ .custom-radio {
  border-color: var(--fm-accent);
  background: var(--fm-primary);
  color: var(--fm-on-primary);
}
.mc-option-label input[type="radio"]:checked ~ .custom-radio::before {
  color: var(--fm-text-inverse);
}
.mc-option-label.is-correct {
  border-color: var(--fm-success);
  background: var(--fm-success-tint);
}
.mc-option-label.is-incorrect {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.hw-stepper-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  padding: 10px 14px;
  margin: 0 0 14px;
  box-shadow: var(--fm-shadow-raised);
}
.hw-stepper-dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hw-stepper-dot {
  min-width: 40px;
  height: 40px;
  border-radius: var(--fm-radius-sm);
  border: 1.5px solid var(--fm-info-ink);
  background: var(--fm-info-tint);
  color: var(--fm-text);
}
.hw-stepper-dot.is-current {
  background: var(--fm-primary);
  border-color: var(--fm-primary);
  color: var(--fm-on-primary);
}
.hw-stepper-dot.is-done {
  background: var(--fm-success-tint);
  border-color: var(--fm-success);
  color: var(--fm-success-ink);
}
.hw-stepper-dot.is-current.is-done {
  background: var(--fm-primary);
  color: var(--fm-on-primary);
}
.hw-stepper-nav {
  display: flex;
  gap: 8px;
}
.hw-stepper-nav button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--fm-radius-sm);
  border: 1.5px solid var(--fm-primary);
  background: var(--fm-raised);
  color: var(--fm-text);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-md);
}
.hw-stepper-nav button:disabled {
  opacity: .4;
}
.problems-container.hw-stepped .problem-section:not(.is-step-current) {
  display: none;
}
body {
  margin: 0;
  padding-bottom: calc(0px + 445px + 16px);
  font-family: var(--fm-font-text);
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-body);
  background: var(--fm-info-tint);
  color: var(--fm-text);
}
.btn-primary {
  background: var(--fm-primary);
  border-color: var(--fm-info-ink);
  color: var(--fm-on-primary);
}
.hw-grownup, .hw-huddle {
  background: var(--fm-highlight-tint);
  border-color: var(--fm-highlight);
  color: var(--fm-highlight-ink);
}
.family-big-idea-piece, .bridge-row.bridge-class, .homework-tab-extra {
  background: var(--fm-accent-tint);
  border-color: var(--fm-accent);
}
.visual-representation-model {
  background: var(--fm-accent-tint);
  border-color: var(--fm-accent);
}
.visual-representation-math {
  background: var(--fm-highlight-tint);
  border-color: var(--fm-highlight);
}
.visual-representation-words {
  background: var(--fm-info-tint);
  border-color: var(--fm-info-ink);
}
.homework-tab-btn.active {
  background: var(--fm-info-tint);
  border-color: var(--fm-info-ink);
  color: var(--fm-info-ink);
  font-weight: var(--fm-fw-bold);
  box-shadow: var(--fm-shadow-raised);
}
.concept-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 40px;
  margin-top: 10px;
  padding: 8px 18px;
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-pill);
  background: var(--fm-info-tint);
  color: var(--fm-info-ink);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
}
.hw-lightbox-dialog {
  position: fixed;
  inset: 0;
  z-index: 100000;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  background: var(--fm-inverse);
  overflow: hidden;
  color: var(--fm-text-inverse);
}
.hw-lightbox-dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hw-lightbox-dialog:not([open]) {
  display: none;
}
.hw-lightbox-dialog::backdrop {
  background: var(--fm-inverse);
  color: var(--fm-text-inverse);
}
.hw-lightbox-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
}
.hw-lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 100001;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--fm-radius-pill);
  background: transparent;
  color: var(--fm-text-inverse);
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  box-shadow: var(--fm-shadow-float);
}
.hw-lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 94vw;
  max-height: 90vh;
  overflow: auto;
}
.hw-lightbox-img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  box-shadow: var(--fm-shadow-float);
}
.hw-lightbox-svg {
  display: block;
  width: min(92vw, 1100px);
  max-height: 86vh;
  height: auto;
  margin: auto;
  padding: 16px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  box-shadow: var(--fm-shadow-float);
}
body.hw-lightbox-open {
  overflow: hidden;
}
.hw-nav-target {
  border-radius: var(--fm-radius-md);
}
.bridge-card {
  margin-top: 10px;
  border-top: 1.5px dashed var(--fm-info-ink);
  padding-top: 8px;
}
.bridge-card > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-sm);
  color: var(--fm-text);
}
.bridge-rows {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.bridge-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
}
.bridge-row.bridge-class {
  border-color: var(--fm-accent);
  background: var(--fm-success-tint);
}
.bridge-icon {
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-heading);
}
.bridge-label {
  display: block;
  font-size: var(--fm-fs-xs);
  color: var(--fm-accent-ink);
}
.bridge-row p {
  margin: 3px 0 0;
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-body);
}
.bridge-listen {
  margin-top: 10px;
}
.cga-card {
  border: 2px solid var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.cga-script {
  list-style: none;
  margin: 8px 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cga-script li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
}
.cga-step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  font-weight: var(--fm-fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cga-step-ask {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.cga-round {
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  border: 1.5px solid var(--fm-highlight);
}
.cga-count {
  margin: 0 0 6px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-highlight-ink);
}
.cga-problem {
  margin: 0 0 10px;
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
}
.cga-claim {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 5px solid var(--fm-highlight);
  background: var(--fm-highlight-tint);
  border-radius: var(--fm-radius-sm);
}
.cga-claim-label {
  margin: 0;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-highlight-ink);
}
.cga-claim-text {
  margin: 4px 0 8px;
  font-size: var(--fm-fs-lg);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-body);
  color: var(--fm-text);
}
.cga-task {
  margin: 0 0 8px;
  font-size: var(--fm-fs-md);
}
.cga-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cga-choice {
  min-height: 48px;
  min-width: 64px;
  padding: 10px 18px;
  font-size: var(--fm-fs-lg);
  font-weight: var(--fm-fw-bold);
  border-radius: var(--fm-radius-md);
  border: 2px solid var(--fm-info-ink);
  background: var(--fm-raised);
  color: var(--fm-text);
}
.cga-choice.is-wrong {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.cga-choice.is-right {
  border-color: var(--fm-success);
  background: var(--fm-success-tint);
}
.cga-feedback {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
  color: var(--fm-highlight-ink);
}
.cga-win {
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--fm-radius-sm);
  background: var(--fm-success-tint);
  border: 1.5px solid var(--fm-success);
}
.cga-win p {
  margin: 0 0 8px;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
}
.cga-win .btn {
  min-height: 44px;
}
.scratchpad-canvas {
  display: block;
  width: 100%;
  height: 220px;
  background: transparent;
}
.grid-btn.is-active {
  background: var(--fm-accent-ink);
  border-color: var(--fm-accent);
  color: var(--fm-on-primary);
}
.scratchpad-expand-btn {
  min-height: 40px;
}
body.hw-scratchpad-open {
  overflow: hidden;
}
.interactive-scratchpad.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px;
  border-radius: 0;
  overflow: auto;
  background: var(--fm-raised);
}
.interactive-scratchpad.is-expanded .scratchpad-canvas-wrap {
  flex: 1 1 auto;
  min-height: 240px;
}
.interactive-scratchpad.is-expanded .scratchpad-canvas {
  height: 100%;
}
.fw-title {
  flex: 1 1 auto;
}
.fw-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}
.fw-pens {
  display: inline-flex;
  gap: 4px;
}
.fw-btn {
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  min-height: 44px;
  min-width: 44px;
  padding: 6px 12px;
  background: var(--fm-raised);
  color: var(--fm-text);
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
}
.fw-btn[aria-pressed="true"], .fw-btn.is-on {
  border-color: var(--fm-primary);
  box-shadow: var(--fm-shadow-inset);
}
.fw-pen {
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fw-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
}
.fw-backdrop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.fw-select {
  font-size: var(--fm-fs-xs);
  min-height: 44px;
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 4px 8px;
  background: var(--fm-raised);
  color: inherit;
  max-width: 100%;
}
.fw-stage {
  position: relative;
  aspect-ratio: 2 / 1;
  min-height: 170px;
  padding: 0;
  overflow: hidden;
  background: var(--fm-raised);
}
.fw-stage.is-big {
  aspect-ratio: 4 / 3;
  min-height: 320px;
}
.fw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fw-stage:not([data-fw-bg="model"]) .fw-model {
  display: none;
}
.fw-stage[data-fw-bg="grid"] {
  background: var(--fm-raised);
}
.fw-stage[data-fw-bg="dots"] {
  background: var(--fm-raised);
}
.fw-stage[data-fw-bg="stamp"][data-fw-stamp="doubleline"] {
  background: var(--fm-raised);
}
.fw-stage[data-fw-bg="stamp"][data-fw-stamp="percent"] {
  background: var(--fm-raised);
}
.fw-stage[data-fw-bg="stamp"][data-fw-stamp="plane"] {
  background: var(--fm-raised);
}
.fw-guide {
  margin: 10px 0 0;
  border: 1.5px dashed var(--fm-accent);
  border-radius: var(--fm-radius-md);
  background: var(--fm-accent-tint);
}
.fw-guide > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.fw-guide-body {
  padding: 0 12px 12px;
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
}
.fw-tip {
  margin: 0 0 8px;
}
.fw-steps {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fw-step {
  display: grid;
  gap: 4px;
}
.fw-add {
  text-align: left;
  font-weight: var(--fm-fw-semibold);
}
.fw-add em {
  font-style: normal;
  font-weight: var(--fm-fw-bold);
}
.fw {
  margin: 12px 0 4px;
  border: 1.5px dashed var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
  padding: 4px 10px 10px;
  background: transparent;
}
.fw > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
}
.fw .hw-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 10px 0 4px;
}
.fw .hw-visual-caption, .fw .hw-work-label {
  display: block;
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-xs);
  margin-bottom: 6px;
}
.fw .hw-work-input {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  font-size: var(--fm-fs-md);
  color: var(--fm-text);
  background: var(--fm-raised);
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  padding: 4px 10px;
  box-sizing: border-box;
}
.fw .fw-stage {
  border: 1.5px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-md);
}
.fw .fw-guide, .fw .fw-guide * {
  color: var(--fm-text);
}
.fw .fw-guide {
  background: var(--fm-info-tint);
}
.fw .fw-guide .fw-btn {
  background: var(--fm-raised);
}
.fw-saved {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-info-ink);
}
.fw .fw-backdrop {
  color: inherit;
}
.fw .fw-btn {
  color: var(--fm-text);
}
.hw-quick-optional {
  margin: 14px 0;
}
.hw-quick-optional button {
  min-height: 48px;
  width: 100%;
  padding: 10px 16px;
  font-weight: var(--fm-fw-bold);
  border-radius: var(--fm-radius-md);
  border: 2px dashed var(--fm-accent);
  background: var(--fm-success-tint);
  color: var(--fm-accent-ink);
}
.cga-quick-note {
  display: none;
  margin: 10px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-highlight-ink);
}
body[data-homework-route="quick"] #hw_cga .cga-round:not([data-cga-round="0"]), body[data-homework-route="quick"] #hw_cga .cga-next {
  display: none;
}
body[data-homework-route="quick"] #hw_cga .cga-quick-note {
  display: block;
}
.hw-huddle {
  margin: 16px 0;
  border: 2px solid var(--fm-highlight);
  border-radius: var(--fm-radius-md);
  background: var(--fm-highlight-tint);
}
.hw-huddle > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  list-style: none;
}
.hw-huddle > summary::-webkit-details-marker {
  display: none;
}
.hw-huddle-icon {
  font-size: var(--fm-fs-2xl);
}
.hw-huddle-text {
  flex: 1;
  display: grid;
  gap: 2px;
}
.hw-huddle-text small {
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.hw-huddle-chev {
  font-size: var(--fm-fs-lg);
}
.hw-huddle > .cga-card {
  margin: 0 12px 12px;
}
.hw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hw-eyebrow {
  margin: 0 0 4px;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.lang-mode-bilingual .hw-stack .lang-en, .lang-mode-bilingual .hw-stack .lang-es {
  display: block;
}
.hw-stack .lang-es::before, .hw-stack .lang-es::after {
  content: none;
}
.lang-mode-bilingual .hw-stack .lang-es {
  margin: 0;
  padding: 0;
  border: 0;
  opacity: .9;
}
.hw-stack, .hw-stack * {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
.lang-mode-bilingual .hw-inline .lang-en, .lang-mode-bilingual .hw-inline .lang-es {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.lang-mode-bilingual .hw-inline .lang-es::before {
  content: " · ";
}
.bottom-status-bar .score-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: var(--fm-fs-xs);
}
.bottom-status-bar .hw-goal-label {
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-heading);
}
.hw-pips {
  display: inline-flex;
  flex-wrap: wrap;
  max-inline-size: 100%;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.hw-pip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--fm-primary);
  background: transparent;
  box-sizing: border-box;
}
.hw-pip.is-on {
  background: var(--fm-accent-ink);
  border-color: var(--fm-accent);
  color: var(--fm-on-primary);
}
.hw-pips-bar .hw-pip {
  width: 14px;
  height: 14px;
}
.hw-goal-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: var(--fm-radius-md);
  border: 2px solid var(--fm-accent);
  background: var(--fm-accent-tint);
}
.hw-goal-card p {
  margin: 0;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
  flex: 1 1 260px;
}
.hw-goal-card .hw-pip {
  width: 24px;
  height: 24px;
}
.hw-bonus {
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.hw-bonus[hidden] {
  display: none;
}
.hw-mystery {
  border-color: var(--fm-info-ink);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 16px 0;
  padding: 16px;
  border-radius: var(--fm-radius-md);
  border: 2px dashed var(--fm-primary);
  background: var(--fm-info-tint);
}
.hw-mystery.is-unlocked {
  border-style: solid;
  border-color: var(--fm-accent);
  background: var(--fm-accent-tint);
}
.hw-mystery-lock {
  font-size: var(--fm-fs-4xl);
  line-height: var(--fm-lh-heading);
  flex: 0 0 auto;
}
.hw-mystery h3 {
  margin: 0 0 6px;
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-ui);
  color: var(--fm-text);
}
.hw-mystery-stem {
  margin: 0 0 8px;
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
  font-weight: var(--fm-fw-bold);
}
.hw-mystery-status {
  margin: 0 0 8px;
  font-size: var(--fm-fs-md);
}
.hw-mystery-open {
  min-height: 48px;
  padding: 10px 18px;
  border-radius: var(--fm-radius-md);
  border: 0;
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  font-weight: var(--fm-fw-bold);
}
.hw-mystery-open[hidden] {
  display: none;
}
body[data-homework-route="quick"] .hw-mystery {
  display: none;
}
.hw-spotlight {
  border-radius: var(--fm-radius-md);
}
.hw-confidence {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: var(--fm-radius-md);
  border: 1px solid var(--fm-info-ink);
  background: var(--fm-raised);
}
.hw-confidence h3 {
  margin: 0 0 10px;
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-ui);
  color: var(--fm-text);
}
.hw-conf-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hw-conf-btn {
  border-color: var(--fm-info-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 8px 6px;
  border-radius: var(--fm-radius-md);
  border: 2px solid var(--fm-info-ink);
  background: var(--fm-info-tint);
  color: var(--fm-text);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-heading);
  text-align: center;
}
.hw-conf-btn.is-on {
  border-color: var(--fm-accent);
  background: var(--fm-accent-tint);
  box-shadow: var(--fm-shadow-inset);
}
.hw-conf-icon {
  font-size: var(--fm-fs-2xl);
  line-height: var(--fm-lh-heading);
}
.hw-conf-note, .hw-conf-growth {
  margin: 8px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.hw-conf-growth {
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.hw-conf-growth:empty {
  display: none;
}
.hw-grownup {
  margin: 16px 0;
  border: 2px solid var(--fm-highlight);
  border-radius: var(--fm-radius-md);
  background: var(--fm-highlight-tint);
}
.hw-grownup > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  list-style: none;
}
.hw-grownup > summary::-webkit-details-marker {
  display: none;
}
.hw-grownup-icon {
  font-size: var(--fm-fs-2xl);
}
.hw-grownup-text {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.hw-grownup-text small {
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-body);
  color: var(--fm-text);
}
.hw-grownup-chev {
  font-size: var(--fm-fs-lg);
}
.hw-grownup-body {
  padding: 0 14px 14px;
  display: grid;
  gap: 14px;
}
.hw-grownup-body > * {
  margin: 0;
}
.hw-grownup .parent-quick-title {
  display: none;
}
.hw-teach {
  margin: 0 0 18px;
  padding: 16px;
  border-radius: var(--fm-radius-md);
  border: 2px solid var(--fm-primary);
  background: var(--fm-raised);
}
.hw-teach h3 {
  margin: 0 0 10px;
  font-size: var(--fm-fs-xl);
  color: var(--fm-text);
}
.hw-teach-steps {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
}
.hw-teach-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.hw-teach-words li {
  padding: 6px 12px;
  border-radius: var(--fm-radius-pill);
  background: var(--fm-accent-tint);
  border: 1px solid var(--fm-accent);
  font-size: var(--fm-fs-sm);
}
.hw-nights {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--fm-radius-md);
  border: 1px solid var(--fm-info-ink);
  background: var(--fm-raised);
}
.hw-nights h3 {
  margin: 0 0 10px;
  font-size: var(--fm-fs-lg);
  color: var(--fm-text);
}
.hw-nights-week {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.hw-night {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--fm-info-ink);
  background: var(--fm-info-tint);
  color: var(--fm-text);
  font-weight: var(--fm-fw-bold);
  font-size: var(--fm-fs-sm);
}
.hw-night.is-on {
  border-color: var(--fm-accent);
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
}
.hw-nights-streak {
  margin: 0;
  font-size: var(--fm-fs-lg);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.hw-nights-note {
  margin: 6px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.hw-share {
  margin: 16px 0;
}
.hw-share-win {
  min-height: 48px;
}
.hw-share-note {
  margin: 6px 0 0;
  font-size: var(--fm-fs-xs);
  color: var(--fm-text);
}
.lang-mode-bilingual .fam-dom-half .lang-en, .lang-mode-bilingual .fam-dom-half .lang-es {
  display: block;
}
.fam-dom-half .lang-es::before {
  content: none;
}
.lang-mode-bilingual .fam-dom-half .lang-es {
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  opacity: .88;
}
.hw-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 10050;
  max-width: min(92vw, 520px);
  padding: 12px 18px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-body);
  box-shadow: var(--fm-shadow-float);
}
.hw-toast[hidden] {
  display: none;
}
dialog.hw-dialog {
  width: min(92vw, 420px);
  padding: 20px;
  border: 0;
  border-radius: var(--fm-radius-md);
  color: var(--fm-text);
  background: var(--fm-raised);
  box-shadow: var(--fm-shadow-float);
}
dialog.hw-dialog::backdrop {
  background: var(--fm-inverse);
  color: var(--fm-text-inverse);
}
dialog.hw-dialog p {
  margin: 0 0 16px;
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
}
.hw-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.hw-dialog-actions .btn {
  min-height: 48px;
}
.homework-tab-extra .tab-extra-blurb {
  display: none;
}
.btn-sm, .btn-read-aloud, .hw-listen, .btn-listen-prob, .vocab-speak-btn, .vocab-btn-label, .btn-feeling, .help-pop-btn, .flip-prompt, .flip-back-prompt, .vocab-visual-hint, .vocab-back-visual, .vocab-def-es, .coach-ladder-step, .problem-coach-ladder, .parent-coach-prompt, .family-problem-tip, .fam-act-materials, .fam-act-time, .fam-mission-complete, .visual-coach-box, .high-five-labels, .achieve-name, .done-problem-chip, .streak-text, .bridge-label, .learning-words-label, .chip-label-en, .chip-label-es, .star-chip, .powerup-badge-star, .hw-conf-label, .hw-goal-label, .bilingual-col .lang-label, .learning-word-chips li, .hw-answer-key-label, .hw-answer-key-label .lang-en, .hw-answer-key-label .lang-es, .family-mission-status, .family-mission-status .lang-en, .family-mission-status .lang-es, .word-bank-label, .word-bank-label .lang-en, .word-bank-label .lang-es, .tool-presets-label, .tool-presets-label .lang-en, .tool-presets-label .lang-es, .wb-preset-btn, .wb-preset-btn .lang-en, .wb-preset-btn .lang-es, .workbench-drawer-text small, .workbench-drawer-text small .lang-en, .workbench-drawer-text small .lang-es, .problem-coach-ladder .lang-en, .problem-coach-ladder .lang-es, .visual-coach-box .lang-en, .visual-coach-box .lang-es, .high-five-labels .lang-en, .high-five-labels .lang-es {
  font-size: var(--fm-fs-xs);
}
.problem-type-badge, .vocab-back-badge, .spotlight-badge, .powerup-tag, .visual-lab-kicker, .fam-act-badge, .fam-game-badge, .lang-tag, .tab-en, .tab-es, .section-title .lang-es, .powerup-letter, .coach-step-number, .fam-act-step-num {
  font-size: var(--fm-fs-xs);
}
.fill-table th, .fill-table td, .fill-table .obj-term, .fill-table span {
  font-size: var(--fm-fs-xs);
}
.vq-stars {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  font-size: var(--fm-fs-xl);
  line-height: var(--fm-lh-heading);
  flex-wrap: wrap;
}
.learn-jump-row {
  display: none;
  flex-wrap: wrap;
}
.learn-jump-row a {
  white-space: normal;
}
.tab-panel-inner .btn, .tab-panel-inner button {
  max-width: 100%;
  white-space: normal;
}
.decimal-place-grid, .hw-visual-frame {
  max-width: 100%;
  overflow-x: auto;
}
.dec-grid-table th, .dec-grid-table th small, .dec-grid-table td {
  font-size: var(--fm-fs-xs);
}
.hw-graph-controls, .hw-graph-controls .lang-en, .hw-graph-controls .lang-es, .hw-graph-reset, .hw-graph-reset .lang-en, .hw-graph-reset .lang-es {
  font-size: var(--fm-fs-xs);
}
.hw-dinner-talk {
  margin: 16px 0;
  padding: 16px 18px;
  border-radius: var(--fm-radius-md);
  border: 2px solid var(--fm-accent);
  background: var(--fm-success-tint);
}
.hw-dinner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.hw-dinner-talk h3 {
  margin: 0;
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-ui);
  color: var(--fm-text);
}
.hw-dinner-prompt {
  margin: 8px 0;
  padding: 12px 14px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  border-left: 4px solid var(--fm-accent);
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-body);
  color: var(--fm-text);
}
.hw-dinner-reassure {
  margin: 0 0 10px;
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-body);
  color: var(--fm-text);
}
.hw-dinner-visual {
  border-top: 1px dashed var(--fm-accent);
  padding-top: 8px;
}
.hw-dinner-visual > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 4px;
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
  list-style: none;
}
.hw-dinner-visual > summary::-webkit-details-marker {
  display: none;
}
.hw-dinner-visual-body {
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
}
.hw-mini-model-svg {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto 8px;
  border-radius: var(--fm-radius-sm);
}
.hw-dinner-visual-copy {
  margin: 0;
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-body);
  color: var(--fm-text);
}
.hw-voice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 8px;
}
.hw-voice-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--fm-radius-pill);
  border: 1.5px solid var(--fm-accent);
  background: var(--fm-success-tint);
  color: var(--fm-accent-ink);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-ui);
  text-align: left;
}
.cga-praise-reveal, .dom-duo-praise {
  margin-top: 10px;
  border-top: 1px dashed var(--fm-info-ink);
  padding-top: 8px;
}
.cga-praise-reveal > summary, .dom-duo-praise > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 8px;
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
  list-style: none;
}
.cga-praise-reveal > summary::-webkit-details-marker, .dom-duo-praise > summary::-webkit-details-marker {
  display: none;
}
.cga-praise-list, .dom-duo-praise-list {
  margin: 6px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-body);
  color: var(--fm-text);
}
.hw-case {
  margin: 14px 0;
  padding: 14px 16px;
  border-left: 6px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  background: var(--fm-success-tint);
}
.hw-case-kicker {
  margin: 0;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-accent-ink);
}
.hw-case-text {
  margin: 6px 0 0;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
  color: var(--fm-text);
}
.hw-stop-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 8px;
}
.hw-stop-nav .btn {
  min-height: 44px;
  font-size: var(--fm-fs-md);
}
.hw-stop-nav [hidden] {
  display: none;
}
.hw-stop-here {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.learn-card[hidden], .learn-jump-row[hidden] {
  display: none;
}
.learn-pager {
  margin: 8px 0 14px;
}
.learn-pager-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.learn-pager-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--fm-radius-pill);
  background: var(--fm-info-tint);
  display: inline-block;
}
.learn-pager-dot.is-done {
  background: var(--fm-accent-tint);
}
.learn-pager-dot.is-on {
  width: 26px;
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
}
.learn-pager-label {
  margin: 0 0 10px;
  font-size: var(--fm-fs-sm);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
}
.learn-pager-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.learn-pager-actions .btn {
  min-height: 44px;
  font-size: var(--fm-fs-md);
}
.learn-pager-back[hidden] {
  display: none;
}
.learn-card {
  scroll-margin-top: 170px;
}
#hw_panel_learn .tab-flow-nav {
  display: none;
}
.homework-tab-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-height: 62px;
  padding: 7px 2px 6px;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-heading);
  font-weight: var(--fm-fw-bold);
  border-bottom: 3px solid transparent;
  border-radius: var(--fm-radius-sm) var(--fm-radius-sm) 0 0;
  box-shadow: none;
  color: var(--fm-text);
  background: var(--fm-raised);
  border: 1px solid var(--fm-info-ink);
  min-width: 0;
}
.homework-tab-btn .tab-label {
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  overflow-wrap: anywhere;
  line-height: var(--fm-lh-heading);
}
.learn-pager-actions .btn, .hw-stop-nav .btn {
  white-space: nowrap;
  min-width: 112px;
}
.cf {
  margin: 0 0 20px;
  border-radius: var(--fm-radius-lg);
  background: var(--fm-inverse);
  color: var(--fm-text-inverse);
  padding: 18px 16px 20px;
  box-shadow: var(--fm-shadow-float);
}
.cf * {
  box-sizing: border-box;
}
.cf-kicker {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-highlight-ink);
}
.cf h2 {
  margin: 6px 0 8px;
  font-size: var(--fm-fs-2xl);
  line-height: var(--fm-lh-heading);
  color: var(--fm-text-inverse);
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.cf p {
  margin: 0 0 12px;
  color: var(--fm-text-inverse);
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
}
.cf p b {
  color: var(--fm-focus-inverse);
}
.cf .obj-term {
  background: transparent;
  color: var(--fm-text-inverse);
  border-bottom-color: var(--fm-highlight);
}
.cf .cf-q .obj-term {
  background: transparent;
  color: var(--fm-text-inverse);
  border-bottom-color: var(--fm-accent);
}
.cf-grid {
  display: grid;
  gap: 16px;
}
.cf-tag {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 6px 0 4px;
}
.cf-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cf-btn {
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--fm-radius-md);
  border: 2px solid var(--fm-accent);
  background: var(--fm-accent-ink);
  color: var(--fm-on-primary);
  font-weight: var(--fm-fw-bold);
}
.cf-btn.alt {
  background: var(--fm-raised);
  color: var(--fm-text);
  border-color: var(--fm-info-ink);
}
.cf-btn.picked {
  border-color: var(--fm-highlight);
}
.cf-btn[disabled] {
  opacity: .5;
}
.cf-q {
  background: var(--fm-highlight-tint);
  color: var(--fm-text);
  border-radius: var(--fm-radius-md);
  padding: 14px;
}
.cf-q p {
  color: var(--fm-text);
  margin-bottom: 10px;
  font-weight: var(--fm-fw-bold);
}
.cf-fb {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-success-tint);
  color: var(--fm-success-ink);
  font-weight: var(--fm-fw-semibold);
}
.cf-fb.no {
  background: var(--fm-highlight-tint);
  color: var(--fm-highlight-ink);
}
.cf-fb[hidden] {
  display: none;
}
.cf-ev {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.cf-ev-hint {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-size: var(--fm-fs-sm);
  color: var(--fm-info-ink);
}
.cf-ev-card {
  text-align: left;
  border-radius: var(--fm-radius-md);
  padding: 10px 12px;
  background: transparent;
  border: 2px dashed var(--fm-border);
  color: var(--fm-text-inverse);
  min-height: 64px;
}
.cf-ev-card[aria-expanded="true"] {
  background: var(--fm-highlight-tint);
  color: var(--fm-text);
  border: 2px solid var(--fm-highlight);
}
.cf-ev-card b {
  display: block;
  font-size: var(--fm-fs-xs);
  color: var(--fm-highlight-ink);
}
.cf-ev-card[aria-expanded="true"] b {
  color: var(--fm-highlight-ink);
}
.cf-ev-term {
  display: block;
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
  margin-top: 2px;
}
.cf-ev-def {
  display: block;
  font-size: var(--fm-fs-sm);
  margin-top: 6px;
  font-weight: var(--fm-fw-semibold);
}
.cf-ev-def[hidden] {
  display: none;
}
.cf-lab {
  margin-top: 14px;
  background: var(--fm-highlight-tint);
  color: var(--fm-text);
  border-radius: var(--fm-radius-md);
  padding: 14px;
}
.cf-lab h3 {
  margin: 0 0 4px;
  font-size: var(--fm-fs-lg);
  color: var(--fm-text);
}
.cf-lab p {
  color: var(--fm-text);
  font-weight: var(--fm-fw-semibold);
  font-size: var(--fm-fs-md);
}
.cf-line {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 12px;
}
.cf-b {
  fill: var(--fm-text-inverse);
  stroke: var(--fm-info-ink);
  stroke-width: 2;
}
.cf-b.q, .cf-b.on {
  fill: var(--fm-text-inverse);
  stroke: var(--fm-accent-ink);
}
.cf-b.new {
  fill: var(--fm-text-inverse);
  stroke: var(--fm-highlight-ink);
}
.cf-t {
  fill: var(--fm-text);
  text-anchor: middle;
}
.cf-t.s {
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  fill: var(--fm-text-muted);
}
.dom-duo {
  margin: 0 0 12px;
}
.dom-duo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dom-duo-actions .btn {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
}
.dom-duo-actions .btn[aria-pressed="true"] {
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  border-color: var(--fm-primary);
}
.dom-duo-panel {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--fm-radius-md);
  border: 2px solid var(--fm-accent);
  background: var(--fm-success-tint);
}
.dom-duo-panel[hidden] {
  display: none;
}
.dom-duo-rule {
  margin: 0 0 8px;
  font-size: var(--fm-fs-xs);
  line-height: var(--fm-lh-body);
  color: var(--fm-text);
}
.dom-duo-turn {
  margin: 0;
  font-size: var(--fm-fs-lg);
  font-weight: var(--fm-fw-bold);
  line-height: var(--fm-lh-ui);
  color: var(--fm-text);
}
.dom-duo-coach {
  margin: 4px 0 0;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
}
.dom-duo-panel[data-turn="grownup"] {
  border-style: dashed;
  background: var(--fm-highlight-tint);
  border-color: var(--fm-highlight);
}
.hw-domino-sheet {
  display: none;
}
.hw-listen-bar {
  margin: 0 0 14px;
}
.hw-listen-bar .btn-read-aloud {
  min-height: 44px;
}
.hw-listen-bar .btn-read-aloud[aria-pressed="true"] {
  background: var(--fm-primary);
  color: var(--fm-on-primary);
}
.is-reading {
  border-radius: var(--fm-radius-xs);
  background: transparent;
}
.hw-voice-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body.no-speech .hw-listen-bar, body.no-speech .hw-listen, body.no-speech .btn-read-aloud, body.no-speech .btn-listen-prob, body.no-speech .btn-listen-concept, body.no-speech .vocab-speak-btn {
  display: none;
}
@media (max-width:620px) {
.big-idea .family-big-idea-copy {
  display: block;
}
.big-idea .family-big-idea-copy p {
  font-size: var(--fm-fs-lg);
}
.big-idea .family-big-idea-copy p.lang-es {
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-left: 0;
  border-top: 1px solid var(--fm-accent);
}
.big-idea .family-big-idea-copy .btn-read-aloud {
  margin-top: 10px;
}
.big-idea .family-whole-labels {
  font-size: var(--fm-fs-sm);
}
}
@media (max-width: 640px) {
.vocab-container {
  grid-template-columns: 1fr;
  gap: 16px;
}
.matching-row {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.matching-select-container {
  min-width: 0;
}
.matching-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.drag-column {
  min-height: 0;
  padding: 10px;
}
.drag-column-header {
  margin-bottom: 6px;
}
.drag-column-slots {
  min-height: 44px;
}
.table-responsive {
  overflow-x: visible;
  border: 0;
}
.fill-table {
  min-width: 0;
  border: 0;
  background: transparent;
}
.fill-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.fill-table, .fill-table tbody, .fill-table tr, .fill-table td {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.fill-table tr {
  margin: 0 0 10px;
  border: 1px solid var(--fm-info-ink);
  border-radius: var(--fm-radius-sm);
  background: var(--fm-raised);
  overflow: hidden;
}
.fill-table tr:nth-child(even) td {
  background: transparent;
}
.fill-table th, .fill-table td {
  border: 0;
  border-bottom: 1px solid var(--fm-info-ink);
  padding: 8px 12px;
  word-break: normal;
  overflow-wrap: anywhere;
}
.fill-table td:last-child {
  border-bottom: 0;
}
.fill-cell-label {
  display: block;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-text);
  margin-bottom: 3px;
}
.table-input {
  max-width: none;
  width: 100%;
}
.bilingual-grid {
  grid-template-columns: 1fr;
}
.stuck-grid {
  grid-template-columns: 1fr;
}
.hw-game-buckets {
  grid-template-columns: 1fr;
}
.vq-card {
  flex-direction: column;
  text-align: center;
}
.vq-img {
  width: min(100%, 240px);
}
.vocab-match-board {
  grid-template-columns: 1fr;
}
.scratchpad-tools {
  gap: 6px;
}
.scratchpad-tools .btn, .scratchpad-close-btn {
  min-height: 44px;
}
.scratchpad-close-btn {
  min-width: 44px;
  font-size: var(--fm-fs-xl);
}
.color-dot {
  width: 28px;
  height: 28px;
}
.bottom-status-bar .status-bar-wrapper {
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.bottom-status-bar .score-progress-container {
  flex: 1 1 calc(100% - 60px);
  min-width: 0;
}
.bottom-status-bar .action-buttons {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 8px;
}
.bottom-status-bar .action-buttons .btn {
  min-height: 48px;
  padding: 6px 10px;
  font-size: var(--fm-fs-sm);
  line-height: var(--fm-lh-heading);
  white-space: normal;
}
.homework-tab-bar {
  gap: 2px;
}
.homework-tab-bar .homework-tab-btn {
  padding-left: 2px;
  padding-right: 2px;
}
}
@media (min-width: 640px) {
.hw-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.fw .hw-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
}
@media (max-width: 600px) {
.drag-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}
.drag-card .card-text {
  flex: 1 1 100%;
  min-width: 0;
  font-weight: var(--fm-fw-semibold);
}
.drag-card .drag-handle {
  flex: 0 0 auto;
}
.mobile-cat-select {
  display: block;
  flex: 1 1 100%;
  max-width: 100%;
  margin: 8px 0 0;
  min-height: 40px;
  font-size: var(--fm-fs-xs);
  padding: 6px 8px;
}
.drag-card.drag-card--short {
  flex-wrap: nowrap;
  align-items: center;
  padding: 6px 10px;
}
.drag-card.drag-card--short .card-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.drag-card.drag-card--short .mobile-cat-select {
  flex: 0 0 8.5em;
  margin: 0;
}
.achievement-shelf {
  grid-template-columns: repeat(2, 1fr);
}
.guided-section.card, .card-ish {
  padding: 20px;
}
.workbench-quick-launch {
  flex-direction: column;
  align-items: flex-start;
}
}
@media (max-width: 550px) {
.bottom-status-bar {
  padding: 12px;
}
.status-bar-wrapper {
  gap: 10px;
}
.action-buttons {
  width: 100%;
  justify-content: space-between;
}
.action-buttons button {
  flex: 1;
  min-height: 44px;
  justify-content: center;
}
}
@media (max-width: 720px) {
.homework-tab-bar {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.homework-tab-extra {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin-left: 0;
  margin-top: 4px;
}
.homework-tab-extra::before {
  display: none;
}
.homework-tab-extra .tab-label {
  flex: none;
  white-space: nowrap;
}
.tab-extra-blurb {
  max-width: none;
  text-align: left;
}
.hw-pathway-grid {
  grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.homework-tab-btn {
  min-height: 56px;
  padding: 6px 1px 5px;
  font-size: var(--fm-fs-xs);
}
.tab-icon {
  font-size: var(--fm-fs-sm);
}
.homework-tab-btn .tab-label {
  white-space: nowrap;
}
.homework-tab-btn .tab-en, .homework-tab-btn .tab-es {
  font-size: var(--fm-fs-xs);
}
.fam-dom-tray {
  flex-direction: column;
}
.fam-dom-chain .fam-dom-tile, .fam-dom-tray .fam-dom-tile {
  width: 100%;
}
.fam-dom-half {
  min-width: 0;
  flex: 1 1 50%;
  max-width: none;
}
.fam-wyr-options {
  flex-direction: column;
}
.fam-wyr-or {
  align-self: flex-start;
}
.fam-sort-bins {
  flex-direction: column;
}
.pb-frame-overlay {
  border-width: 8px;
}
.pb-frame-header, .pb-frame-footer {
  gap: 10px;
  font-size: var(--fm-fs-xs);
  padding: 5px 10px;
}
.pb-frame-lesson, .pb-frame-date {
  flex-shrink: 0;
}
.pb-stickers-layer {
  padding: 34px 14px;
}
.pb-sticker-stamp {
  font-size: var(--fm-fs-2xl);
}
.pb-actions-live > *, .pb-actions-review > * {
  flex: 1 1 100%;
  justify-content: center;
  text-align: center;
}
.pb-countdown-overlay {
  font-size: var(--fm-fs-4xl);
}
}
@media (max-width: 400px) {
.homework-tab-btn .tab-en, .homework-tab-btn .tab-es {
  font-size: var(--fm-fs-xs);
}
}
@media (min-width: 760px) {
.hw-help-drawer-sheet {
  top: 0;
  left: auto;
  width: min(460px, 92vw);
  max-height: none;
  border-radius: var(--fm-radius-lg) 0 0 var(--fm-radius-lg);
}
}
@media (max-width: 520px) {
.family-talk-pane {
  padding-right: 0;
  padding-top: 52px;
}
}
@media (max-width:760px) {
.family-visual-lab {
  border-radius: var(--fm-radius-lg);
}
.visual-lab-heading {
  grid-template-columns: 1fr;
}
.visual-lab-stage {
  min-height: 230px;
}
.visual-representation-grid {
  grid-template-columns: 1fr;
}
.visual-representation-card {
  min-height: 120px;
}
}
@media (min-width: 1180px) {
.container, .status-bar-wrapper {
  max-width: 1080px;
}
}
@media (max-width: 620px) {
.big-idea .concept-fallback-visual {
  grid-template-columns: 1fr;
}
.concept-fallback-arrow {
  transform: rotate(90deg);
  text-align: center;
}
.big-idea .key-idea-banner p {
  font-size: var(--fm-fs-lg);
}
.big-idea .guided-step {
  padding: 12px 14px;
}
.big-idea .guided-step .step-lead {
  font-size: var(--fm-fs-md);
}
.big-idea .concept-visual-caption {
  font-size: var(--fm-fs-lg);
}
.concept-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border: 2px solid var(--fm-accent);
  border-radius: var(--fm-radius-md);
  background: var(--fm-accent-tint);
  color: var(--fm-accent-ink);
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
}
.big-idea .concept-visual-wrap {
  padding: 14px 8px;
}
.guided-step-num {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: var(--fm-fs-md);
}
.homework-tab-chrome {
  margin-top: 8px;
  padding: 7px 7px 6px;
  border-radius: var(--fm-radius-md);
}
.btn-read-aloud, .btn-listen-concept, .obj-term, .btn-listen-prob, .sound-toggle-btn, .powerup-choice-btn {
  min-height: 44px;
}
.btn-read-aloud, .btn-listen-concept {
  min-width: 44px;
}
.homework-tab-bar .homework-tab-btn .tab-en, .homework-tab-bar .homework-tab-btn .tab-es {
  font-size: var(--fm-fs-xs);
}
.homework-tab-bar .tab-step {
  width: 20px;
  height: 20px;
  font-size: var(--fm-fs-xs);
}
.powerup-tag {
  font-size: var(--fm-fs-xs);
}
.learn-jump-row {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  overflow-x: auto;
}
.learn-jump-row a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--fm-accent);
  border-radius: var(--fm-radius-pill);
  background: var(--fm-raised);
  color: var(--fm-accent-ink);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  text-decoration: none;
}
}
@media (max-width: 900px) {
.photobooth-container {
  grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.fam-act-head {
  display: block;
}
.achievement-shelf {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:700px) {
.homework-extra-actions {
  grid-template-columns: 1fr;
}
}
@media (max-width:600px) {
.homework-tab-chrome {
  position: static;
}
.hw-tab-meta-row {
  flex-wrap: wrap;
  gap: 8px;
}
}
@media (max-width: 480px) {
.mathpad-keys {
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
}
.mathpad-preview-tag {
  display: none;
}
.cga-choice {
  flex: 1 1 100%;
}
}
@media (min-width: 1000px) {
#hw_panel_learn {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
}
#hw_panel_learn .big-idea {
  display: contents;
}
#hw_panel_learn > .learn-jump-row {
  display: none;
}
#hw_panel_learn > * {
  grid-column: 2;
  min-width: 0;
}
#hw_panel_learn .learn-big-idea-block > *, #hw_panel_learn .big-idea > * {
  margin: 0 0 18px;
}
#hw_panel_learn > .cf {
  grid-column: 1 / -1;
  grid-row: 1;
}
#hw_panel_learn > .learn-card[hidden] {
  display: block;
}
#hw_panel_learn > .learn-pager {
  display: none;
}
#hw_panel_learn > .learn-card:has(> #hw_learn_try) {
  grid-column: 1;
  grid-row: 2 / span 12;
  margin-bottom: 18px;
}
#hw_panel_learn .concept-visual-wrap {
  order: 8;
}
#hw_panel_learn > .tab-flow-nav {
  grid-column: 1 / -1;
  grid-row: 14;
}
#hw_panel_learn > .tab-flow-nav {
  grid-row: 15;
}
#hw_panel_learn .section-title {
  width: 100%;
  box-sizing: border-box;
}
#hw_panel_learn .key-idea-banner .btn-read-aloud {
  display: none;
}
.cf {
  padding: 22px 24px 24px;
}
.cf-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
}
.cf-lab {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: 24px;
  align-items: center;
}
.cf-lab h3, .cf-lab .cf-msg {
  grid-column: 2;
}
.cf-lab .cf-line {
  grid-column: 1;
  grid-row: 1 / span 3;
  margin: 0;
}
.cf-lab .cf-row {
  grid-column: 2;
}
}
@media (min-width: 860px) {
.container {
  max-width: 1140px;
  padding: 24px 20px 60px;
}
.homework-tabs-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
}
.homework-tab-chrome {
  position: sticky;
  top: 20px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
  background: var(--fm-raised);
  border: 1px solid var(--fm-highlight);
  border-radius: var(--fm-radius-md);
  box-shadow: var(--fm-shadow-raised);
}
.homework-tab-chrome::before {
  content: "TONIGHT'S PATH";
  display: block;
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: var(--fm-info-ink);
  padding: 2px 8px 6px;
  border-bottom: 1px solid var(--fm-highlight);
  margin-bottom: 4px;
}
body.lang-mode-es .homework-tab-chrome::before {
  content: "RUTA DE HOY";
}
.hw-tab-meta-row {
  order: 10;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--fm-highlight);
}
.homework-tab-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: transparent;
}
.homework-tab-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 46px;
  padding: 8px 12px;
  border: 1.5px solid transparent;
  border-radius: var(--fm-radius-md);
  background: transparent;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.homework-tab-btn.is-active {
  background: var(--fm-highlight-tint);
  border-color: var(--fm-highlight);
  color: var(--fm-text);
  box-shadow: var(--fm-shadow-raised);
}
.homework-tab-btn .tab-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--fm-radius-pill);
  background: var(--fm-highlight-tint);
  color: var(--fm-text);
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  flex-shrink: 0;
}
.homework-tab-btn.is-active .tab-step {
  background: var(--fm-highlight-ink);
  color: var(--fm-on-primary);
}
.homework-tab-btn.is-done .tab-step {
  background: var(--fm-success);
  color: var(--fm-on-success);
}
.homework-tab-btn.is-done .tab-step::after {
  content: "✓";
  font-size: var(--fm-fs-xs);
}
.homework-tab-btn .tab-icon {
  display: inline-block;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-heading);
  flex-shrink: 0;
}
.homework-tab-btn .tab-label {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
  color: inherit;
}
.homework-tab-btn .tab-en, .homework-tab-btn .tab-es {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.lang-mode-es .homework-tab-btn .tab-en {
  display: none;
}
body:not(.lang-mode-es) .homework-tab-btn .tab-es {
  display: none;
}
.homework-tab-extra {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  margin-left: 0;
  margin-top: 6px;
  border: 1.5px dashed var(--fm-highlight);
  border-radius: var(--fm-radius-md);
  background: var(--fm-highlight-tint);
  width: 100%;
  box-sizing: border-box;
}
.homework-tab-extra::before {
  display: none;
}
.homework-tab-extra .tab-extra-blurb {
  display: none;
}
.homework-tab-extra .tab-label {
  text-align: left;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-bold);
}
.homework-tab-track {
  order: -1;
  margin-bottom: 6px;
}
.homework-tab-panels {
  min-width: 0;
}
.hw-sub-rail {
  display: none;
  flex-direction: column;
  gap: 3px;
  margin: 4px 0 8px 16px;
  padding-left: 10px;
  border-left: 2px solid var(--fm-highlight);
}
.homework-tab-btn.is-active + .hw-sub-rail {
  display: flex;
}
.hw-sub-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--fm-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  font-size: var(--fm-fs-xs);
  font-weight: var(--fm-fw-semibold);
  color: var(--fm-info-ink);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.hw-sub-btn.is-active {
  background: var(--fm-highlight-tint);
  border-color: var(--fm-highlight);
  color: var(--fm-highlight-ink);
  font-weight: var(--fm-fw-bold);
}
.hw-sub-btn .sub-icon {
  font-size: var(--fm-fs-xs);
  flex-shrink: 0;
}
.hw-sub-btn .sub-text {
  flex: 1;
  font-size: var(--fm-fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.lang-mode-es .hw-sub-btn .lang-en {
  display: none;
}
body:not(.lang-mode-es) .hw-sub-btn .lang-es {
  display: none;
}
}
@media (max-width: 859px) {
.hw-sub-rail, .hw-sub-btn {
  display: none;
}
}
@media screen {
.hw-colearn-card {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid var(--fm-highlight);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  color: var(--fm-text);
}
.hw-colearn-title {
  margin: 0 0 8px;
  font-size: var(--fm-fs-lg);
  line-height: var(--fm-lh-heading);
}
.hw-colearn-lead, .hw-colearn-stem, .hw-kitchen-offline-text {
  margin: 8px 0;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
  max-width: 68ch;
}
.hw-colearn-svg-stage {
  margin: 12px 0 0;
}
.hw-colearn-svg-stage svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;
}
.hw-subcard {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--fm-highlight);
}
.hw-subcard-tag {
  margin: 0 0 6px;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-ui);
}
.hw-transfer-choices, .hw-glitch-steps, .hw-spiral-options {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}
.hw-spiral-options {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.hw-transfer-choice-btn, .hw-glitch-step-btn, .hw-spiral-opt-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--fm-highlight);
  border-radius: var(--fm-radius-md);
  background: var(--fm-raised);
  color: inherit;
  font-size: var(--fm-fs-md);
  text-align: start;
}
.hw-spiral-opt-btn {
  justify-content: center;
}
.hw-choice-letter {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fm-highlight-tint);
  font-weight: var(--fm-fw-bold);
}
.is-correct {
  border-color: var(--fm-highlight);
  background: var(--fm-highlight-tint);
}
.is-correct::after {
  content: "\2713";
  margin-inline-start: auto;
  font-weight: var(--fm-fw-bold);
}
.is-try-again {
  border-style: dashed;
  background: var(--fm-highlight-tint);
}
.hw-v3-nudge {
  margin: 8px 0 0;
  font-size: var(--fm-fs-md);
  font-weight: var(--fm-fw-bold);
}
.hw-glitch-instruction {
  margin: 8px 0 0;
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
  font-weight: var(--fm-fw-bold);
}
.hw-glitch-frame {
  margin: 8px 0 0;
}
.hw-transfer-feedback, .hw-glitch-feedback, .hw-spiral-exp {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-highlight-tint);
  font-size: var(--fm-fs-md);
  line-height: var(--fm-lh-body);
}
.hw-copilot-card {
  display: none;
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: var(--fm-radius-md);
  background: var(--fm-highlight-tint);
  border: 1px solid var(--fm-highlight);
  font-size: var(--fm-fs-md);
}
body[data-persona-mode="copilot"] .hw-copilot-card {
  display: block;
}
}
@media screen and (max-width: 480px) {
.hw-spiral-options {
  grid-auto-flow: row;
}
.hw-colearn-card {
  padding: 16px;
}
}
@media (max-width: 700px) {
.container button:not(.obj-term):not(.obj-term-glue), .container summary, .container select, .container input[type="text"], .container input[type="number"], .container input[type="file"], .container .btn, .sound-toggle-btn {
  min-height: 44px;
}
.sound-toggle-btn {
  min-width: 44px;
}
.container button:not(.obj-term):not(.obj-term-glue) {
  min-width: 44px;
}
}
@media screen and (min-width: 900px) {
body #hw_panel_learn {
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
}
body #hw_panel_learn > *, body #hw_panel_learn > .learn-card:has(> #hw_learn_try) {
  grid-column: 1;
  grid-row: auto;
}
}

/* ── Tone utilities: the math mapping (part / whole / unknown) and surfaces, for markup that used to carry inline colors ── */
.u-ink-part { color: var(--fm-m-part); }
.u-ink-whole { color: var(--fm-m-whole); }
.u-ink-unknown { color: var(--fm-m-unknown); }
.u-ink-muted { color: var(--fm-text-muted); }
.u-ink-look { color: var(--fm-look); }
.u-ink-primary { color: var(--fm-primary); }
.u-ink-inverse { color: var(--fm-text-inverse); }
.u-bg-raised { background: var(--fm-raised); }
.u-tint-part { background: var(--fm-m-part-tint); }
.u-tint-whole { background: var(--fm-m-whole-tint); }
.u-tint-unknown { background: var(--fm-m-unknown-tint); }
.u-tint-sunken { background: var(--fm-sunken); }
.u-head { background: var(--fm-inverse); color: var(--fm-text-inverse); }
.u-edge { border: var(--fm-line) solid var(--fm-border-strong); border-radius: var(--fm-radius-sm); }
.u-edge-top { border-block-start: var(--fm-line-strong) solid var(--fm-m-unknown-edge); }
.u-pen-navy { background: var(--fm-primary); }
.u-pen-teal { background: var(--fm-accent-ink); }
.u-pen-amber { background: var(--fm-highlight-ink); }
.u-pen-coral { background: var(--fm-look-edge); }
.hw-mini-model-svg, .hw-percent-bar-svg, .interactive-coord-svg, .visual-lab-svg { background: var(--fm-raised); border-radius: var(--fm-radius-sm); }
.btn-feeling, .badge-feeling { background: var(--fm-sunken); border: var(--fm-line) solid var(--fm-border-strong); border-radius: var(--fm-radius-sm); }
.btn-feeling.is-selected { background: var(--fm-accent-tint); border-color: var(--fm-accent-ink); color: var(--fm-accent-ink); }
.btn-outline-danger { background: var(--fm-look-tint); color: var(--fm-look); border: var(--fm-line) solid var(--fm-look-edge); border-radius: var(--fm-radius-sm); }

/* Home mission (assets/class-investigation, shared with the stand-alone class page): re-point its palette at the tokens. */
.ci-hm {
  --ci-ink: var(--fm-text);
  --ci-muted: var(--fm-text-muted);
  --ci-line: var(--fm-border-strong);
  --ci-bg: var(--fm-surface);
  --ci-card: var(--fm-raised);
  --ci-teal: var(--fm-accent-ink);
  --ci-teal-dark: var(--fm-accent-ink);
  --ci-navy: var(--fm-primary);
  --ci-amber: var(--fm-highlight-ink);
  --ci-amber-bg: var(--fm-highlight-tint);
  --ci-ok: var(--fm-success-ink);
  --ci-ok-bg: var(--fm-success-tint);
  --ci-bad: var(--fm-look);
  --ci-focus: var(--fm-focus);
  --ci-radius: var(--fm-radius-md);
}

/* Case-file price tag (inline SVG): drawn with tokens, sized by the tag's own viewBox. */
.cf-tag-body { fill: var(--fm-m-unknown-tint); stroke: var(--fm-m-unknown-edge); stroke-width: 4; }
.cf-tag-hole { fill: var(--fm-primary); }
.cf-tag-big { fill: var(--fm-primary); font-family: var(--fm-font-display); font-weight: var(--fm-fw-bold); }
.cf-tag-label { fill: var(--fm-m-unknown); font-weight: var(--fm-fw-bold); }
input[type="text"], input[type="number"], input[type="search"], input[type="email"], textarea, select { background: var(--fm-raised); color: var(--fm-text); border: var(--fm-line) solid var(--fm-border-strong); border-radius: var(--fm-radius-sm); }

/* Labels that sit on the dark (inverse) surfaces: case file, flip-card back, status bar. */
.cf-kicker { color: var(--fm-focus-inverse); }
.vocab-back-badge { color: var(--fm-focus-inverse); }
.bottom-status-bar .hw-goal-label, .bottom-status-bar .hw-goal-label .lang-en, .bottom-status-bar .hw-goal-label .lang-es { color: var(--fm-text-inverse); }
.cf-ev-card b, .cf-ev-card[aria-expanded="true"] b { color: var(--fm-focus-inverse); }
svg line { fill: none; }
.bottom-status-bar, .bottom-status-bar .score-text { color: var(--fm-text-inverse); }
.bottom-status-bar .score-text span { color: inherit; }

/* Scratchpad and word-problem stage backgrounds: graph paper, dots and the unit stamps, drawn with token colors. */
.scratchpad-canvas-wrap, .fw-stage { background-color: var(--fm-raised); }
.scratchpad-bg-graph, .fw-stage[data-fw-bg="grid"] {
  background-image: linear-gradient(var(--fm-border-strong) 1px, transparent 1px), linear-gradient(90deg, var(--fm-border-strong) 1px, transparent 1px);
  background-size: 24px 24px;
}
.scratchpad-bg-dots, .fw-stage[data-fw-bg="dots"] {
  background-image: radial-gradient(circle, var(--fm-border-strong) 1.5px, transparent 2px);
  background-size: 24px 24px;
}
.scratchpad-bg-percent, .fw-stage[data-fw-bg="stamp"][data-fw-stamp="percent"] {
  background-image: linear-gradient(var(--fm-border-strong) 1px, transparent 1px), linear-gradient(90deg, var(--fm-border-strong) 1px, transparent 1px);
  background-size: 10% 10%;
  border: var(--fm-line-strong) solid var(--fm-text);
}
.scratchpad-bg-plane, .fw-stage[data-fw-bg="stamp"][data-fw-stamp="plane"] {
  background-image: linear-gradient(var(--fm-text) 0 0), linear-gradient(var(--fm-text) 0 0), linear-gradient(var(--fm-border-strong) 1px, transparent 1px), linear-gradient(90deg, var(--fm-border-strong) 1px, transparent 1px);
  background-size: 100% 2px, 2px 100%, 10% 10%, 10% 10%;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
}
.scratchpad-bg-doubleline, .fw-stage[data-fw-bg="stamp"][data-fw-stamp="doubleline"] {
  background-image: linear-gradient(var(--fm-text) 0 0), linear-gradient(var(--fm-text) 0 0), repeating-linear-gradient(90deg, var(--fm-text) 0 2px, transparent 2px 9%);
  background-size: 92% 2px, 92% 2px, 92% 16px;
  background-position: center 32%, center 72%, center 32%;
  background-repeat: no-repeat;
}
.is-zoomable { cursor: zoom-in; }
.btn-listen-prob, .hw-listen, .btn-read-aloud, .vocab-speak-btn { white-space: nowrap; flex-shrink: 0; }

/* !important (documented): family homework embeds only its lesson-matched manipulative, so the site-wide Save/Resume workbench shortcut stays hidden whatever else sets its display. */
#nsr-workbench { display: none !important; }
}

/* Unlayered on purpose: assets/class-investigation/class-investigation.css (shared with the stand-alone class page) is
   unlayered and loads after this sheet, so only an unlayered, higher-specificity rule can re-point its direct declarations. */
.ci-hm.ci-hm [class*="ci-"] {
  border-radius: var(--fm-radius-sm);
}
.ci-hm.ci-hm .ci-card {
  border-radius: var(--fm-radius-md);
}
.ci-hm.ci-hm .ci-codeinput {
  border-color: var(--fm-border-strong);
  color: var(--fm-text);
}
.ci-hm.ci-hm .ci-btn-primary {
  color: var(--fm-on-primary);
}
.ci-hm.ci-hm .ci-btn-quiet {
  background: var(--fm-raised);
  color: var(--fm-text);
}
.ci-hm.ci-hm .ci-small,
.ci-hm.ci-hm .ci-hm-title {
  font-size: var(--fm-fs-sm);
}