dialog:has(.hcf-lcm) {
  width: min(1080px, calc(100% - 24px));
  max-height: 94vh;
}
.hcf-lcm {
  --hcf-blue: #3478e5;
  --hcf-violet: #7657d8;
  --hcf-mint: #28a780;
  --hcf-gold: #f0ad24;
  color: #172a46;
}
.hcf-reminder {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 10px 14px;
  align-items: center;
  border: 2px solid #dce9ff;
  border-radius: 18px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #eff6ff, #f7f2ff);
  font-size: .92rem;
}
.hcf-reminder strong { color: #2857b8; font-family: var(--font-game); }
.hcf-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 18px 0;
  padding: 6px;
  border-radius: 16px;
  background: #eaf0f8;
}
.hcf-mode-tabs button {
  border: 0;
  border-radius: 12px;
  padding: 12px;
  background: transparent;
  color: #52647c;
  font: 800 1rem/1.2 var(--font-game);
  cursor: pointer;
}
.hcf-mode-tabs button.active { background: #fff; color: #2458b5; box-shadow: 0 5px 15px rgba(32,70,125,.12); }
.number-entry,
.practice-toolbar {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: end;
  flex-wrap: wrap;
}
.number-entry label,
.practice-toolbar label,
.answer-inputs label {
  display: grid;
  gap: 6px;
  color: #50637e;
  font-size: .86rem;
  font-weight: 800;
}
.number-entry input,
.answer-inputs input,
.practice-toolbar select {
  min-height: 50px;
  border: 2px solid #cfdbec;
  border-radius: 13px;
  background: #fff;
  color: #172a46;
  padding: 9px 13px;
  font: 800 1.2rem/1 var(--font-game);
}
.number-entry input { width: 140px; }
.number-join { padding-bottom: 12px; color: #71819a; font: 900 1.3rem/1 var(--font-game); }
.hcf-input-error { min-height: 1.4em; margin: 8px 0; color: #bc3547; text-align: center; font-weight: 700; }
.factorisations {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0 20px;
}
.factorisations > div {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: baseline;
  border: 2px solid #dce6f4;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}
.factorisations span { color: var(--hcf-blue); font: 900 1.45rem/1 var(--font-game); }
.factorisations strong { font: 800 1.22rem/1.4 var(--font-game); }
.factorisations sup,
.calculation-card sup { color: #744fd0; font-size: .68em; }
.venn-heading {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  color: #52647c;
  font-weight: 800;
}
.prime-venn {
  display: grid;
  grid-template-columns: 1fr .72fr 1fr;
  min-height: 190px;
  margin: 8px 0 20px;
  filter: drop-shadow(0 14px 20px rgba(28,54,91,.12));
}
.venn-side,
.venn-overlap { display: grid; place-items: center; padding: 24px 16px; }
.venn-side { border: 3px solid; }
.venn-left {
  border-color: #4c8df2;
  border-right: 0;
  border-radius: 100px 0 0 100px;
  background: linear-gradient(90deg, rgba(76,141,242,.24), rgba(76,141,242,.10));
}
.venn-right {
  border-color: #8b63db;
  border-left: 0;
  border-radius: 0 100px 100px 0;
  background: linear-gradient(90deg, rgba(139,99,219,.10), rgba(139,99,219,.24));
}
.venn-overlap {
  position: relative;
  z-index: 1;
  border-block: 3px solid #4f70dc;
  background: linear-gradient(135deg, rgba(76,141,242,.22), rgba(139,99,219,.22));
}
.factor-zone { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.prime-chip {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 3px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: #fff;
  color: #294f95;
  font: 900 1.35rem/1 var(--font-game);
  box-shadow: 0 5px 12px rgba(34,62,104,.18);
  animation: factor-pop .42s cubic-bezier(.2,.8,.3,1.3) both;
  animation-delay: var(--delay);
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
@keyframes factor-pop { from { opacity: 0; transform: scale(.55) translateY(12px); } }
.empty-factor { color: #8491a3; font-style: italic; }
.prime-venn[data-highlight="hcf"] [data-factor-area="left"],
.prime-venn[data-highlight="hcf"] [data-factor-area="right"] { opacity: .28; transform: scale(.88); }
.prime-venn[data-highlight="hcf"] [data-factor-area="shared"],
.prime-venn[data-highlight="lcm"] .prime-chip { box-shadow: 0 0 0 5px rgba(245,180,38,.28), 0 8px 16px rgba(40,64,98,.2); }
.calculation-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.calculation-card {
  display: grid;
  gap: 9px;
  min-height: 150px;
  border: 2px solid #dce5f2;
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  color: #172a46;
  text-align: left;
  cursor: pointer;
}
.calculation-card.active { border-color: #4c7be0; box-shadow: 0 0 0 4px rgba(76,123,224,.12); }
.calculation-card span { color: #52647c; font-weight: 800; }
.calculation-card strong { color: #244f9b; font: 900 1.35rem/1.35 var(--font-game); }
.calculation-card small { font-size: .88rem; line-height: 1.45; }
.tree-actions { margin: 18px 0 0; text-align: center; }
.dual-factor-trees {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-top: 16px;
}
.dual-factor-trees[hidden] {
  display: none !important;
}
.dual-factor-trees article {
  overflow: hidden;
  border: 2px solid #dbe5f2;
  border-radius: 18px;
  padding: 18px 12px;
  background: #fff;
  text-align: center;
}
.dual-factor-trees h3 { color: #2c5399; font-size: 1.15rem; }
.dual-factor-trees p { margin-bottom: 0; font-weight: 800; }
.factor-tree-branch,
.factor-node { animation: tree-grow .42s ease both; animation-delay: var(--tree-delay); }
.factor-tree-branch { position: relative; }
@keyframes tree-grow { from { opacity: 0; transform: translateY(-8px) scale(.94); } }
.factor-node { position: relative; display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; border: 2px solid #9db7dd; border-radius: 14px; background: #eff5ff; color: #244f9b; font: 900 1.08rem/1 var(--font-game); }
.factor-node small { display: block; color: #237a60; font-size: .58rem; }
.prime-leaf { border-color: #55b695; background: #e8faf3; color: #176b52; }
.factor-children { position: relative; display: grid; grid-template-columns: repeat(2,minmax(48px,1fr)); gap: 12px; padding-top: 23px; }
.factor-children::before { content: ""; position: absolute; top: 8px; left: 25%; right: 25%; height: 2px; background: #9db7dd; }
.factor-children > *::before { content: ""; position: absolute; top: -15px; left: 50%; width: 2px; height: 15px; background: #9db7dd; }
.practice-toolbar { justify-content: space-between; margin-bottom: 15px; }
.practice-question { border-radius: 20px; padding: 24px; background: linear-gradient(145deg,#f3f7fc,#f8f4ff); text-align: center; }
.practice-kicker { margin: 0; color: #516581; font-weight: 800; }
.practice-pair { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 14px 0; }
.practice-pair strong { display: grid; place-items: center; min-width: 92px; min-height: 76px; border: 3px solid #fff; border-radius: 22px; background: linear-gradient(145deg,#4f91f5,#7259d6); color: #fff; font: 900 2.35rem/1 var(--font-game); box-shadow: 0 10px 22px rgba(58,86,163,.2); }
.practice-pair span { font: 900 1.4rem/1 var(--font-game); }
.answer-inputs { display: flex; gap: 14px; justify-content: center; margin: 18px auto; }
.answer-inputs input { width: 160px; }
.practice-feedback { min-height: 1.5em; font-weight: 800; }
.practice-feedback.correct { color: #16805e; animation: success-pop .45s ease; }
.practice-feedback.incorrect { color: #b34051; }
@keyframes success-pop { 50% { transform: scale(1.05); } }
.practice-hint,
.practice-working { margin-top: 16px; border-radius: 15px; padding: 16px; background: #fff5d8; color: #714f09; font-weight: 700; }
.practice-working { background: #fff; color: inherit; }
.working-steps { display: grid; gap: 10px; text-align: left; }
.working-steps > div { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; border-bottom: 1px solid #e3eaf3; padding: 8px 0; }
.working-steps > div:last-child { border: 0; }
.working-steps span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e7efff; color: #315ba5; font: 900 1rem/1 var(--font-game); }
.working-steps p { margin: 0; }
.points-rule { margin: 18px 0 0; color: #60718a; font-size: .82rem; }
.points-rule strong { color: #315ba5; }
.hcf-lcm button:disabled { opacity: .48; cursor: not-allowed; }
@media (max-width: 720px) {
  .hcf-reminder { grid-template-columns: 1fr; gap: 4px; }
  .factorisations,
  .calculation-cards,
  .dual-factor-trees { grid-template-columns: 1fr; }
  .prime-venn { grid-template-columns: 1fr; }
  .venn-heading { display: none; }
  .venn-left { border-right: 3px solid #4c8df2; border-bottom: 0; border-radius: 60px 60px 0 0; }
  .venn-overlap { border: 3px solid #4f70dc; }
  .venn-right { border-left: 3px solid #8b63db; border-top: 0; border-radius: 0 0 60px 60px; }
  .venn-side::before,
  .venn-overlap::before { display: block; margin-bottom: 8px; color: #52647c; font-size: .78rem; font-weight: 800; }
  .venn-left::before { content: "First number only"; }
  .venn-overlap::before { content: "Shared by both"; }
  .venn-right::before { content: "Second number only"; }
}
@media (max-width: 520px) {
  .number-entry { align-items: stretch; }
  .number-entry label { width: calc(50% - 25px); }
  .number-entry input { width: 100%; }
  .number-entry .primary { width: 100%; }
  .answer-inputs input { width: 128px; }
  .practice-question { padding: 18px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .prime-chip,
  .factor-tree-branch,
  .factor-node,
  .practice-feedback.correct { animation: none; }
}