:root {
  color: #212121;
  background: #fafafa;
  font-family: "Comic Neue", "Poppins", "Arial Rounded MT Bold", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.42; }

.loading-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
}

.spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #ffe0b2;
  border-top-color: #e65100;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.error-screen {
  max-width: 680px;
  margin: 12vh auto;
  padding: 2rem;
  border: 1px solid #ffcdd2;
  border-radius: 16px;
  color: #b71c1c;
  background: #fff;
}

.setup-page { min-height: 100vh; padding: 1rem; }
.setup-shell { width: 100%; margin: 0 auto; }
.setup-home-button {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: #e65100;
  font-size: 1.5rem;
}

.hero {
  position: relative;
  min-height: 220px;
  padding: 2.5rem 5.5rem;
  border: 1px solid #ffddcf;
  border-radius: 16px;
  background: #fff;
}

.hero-tags { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1.35rem; }
.tag {
  padding: 0.35rem 0.85rem;
  border: 1px solid #64b5f6;
  border-radius: 999px;
  color: #0277bd;
  font-weight: 700;
}

h1 { margin: 0; color: #e65100; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.08; }
.hero-description { max-width: 1100px; margin: 1.3rem 0 0; color: #555; font-size: 1.15rem; font-weight: 700; line-height: 1.55; }

.hero-play {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #fff;
  background: #2e7d32;
  font-size: 1.8rem;
}

.options-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
  margin-top: 1rem;
}

.option-card {
  width: max-content;
  max-width: 100%;
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  background: #fff;
}

.option-card:has(input[type="checkbox"]:checked) { border-color: #90caf9; background: #f7fbff; }
.option-card input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 auto; accent-color: #e65100; }
.option-name { flex: 0 0 auto; color: #0288d1; font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.option-values { display: flex; flex: 0 0 auto; gap: 0.45rem; }
.option-values input {
  width: 96px;
  height: 42px;
  padding: 0 0.7rem;
  border: 1px solid #bdbdbd;
  border-radius: 20px;
  outline: none;
}
.option-values input:focus { border: 2px solid #e65100; }
.option-values input:disabled { background: #f5f5f5; }
.info {
  position: relative;
  flex: 0 0 auto;
  color: #0288d1;
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  outline: none;
}
.info::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + .65rem);
  z-index: 30;
  width: max-content;
  max-width: min(360px, calc(100vw - 2rem));
  padding: .7rem .85rem;
  border-radius: 10px;
  color: #fff;
  background: #263238;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
  pointer-events: none;
}
.info::before {
  content: "";
  position: absolute;
  right: .3rem;
  bottom: calc(100% + .25rem);
  z-index: 31;
  border: .4rem solid transparent;
  border-top-color: #263238;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease, visibility 140ms;
}
.info:hover::after, .info:focus-visible::after,
.info:hover::before, .info:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.command-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid #c62828;
  background: #fff;
  color: #c62828;
}
.command-bar code { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.copy-button { width: 38px; height: 38px; border-radius: 50%; color: #c62828; background: #ffebee; }

.exercise-page { min-height: 100vh; background: #fff; }
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: 74px;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  color: #fff;
  background: #ef4d00;
}
.home-button { width: 42px; height: 42px; border-radius: 50%; color: #fff; background: transparent; font-size: 1.5rem; }
.exercise-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 1.3rem; font-weight: 800; white-space: nowrap; }
.progress-track { height: 6px; margin-top: 0.35rem; border-radius: 999px; background: rgba(255,255,255,.5); overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: #2e7d32; transition: width 260ms ease; }
.progress-label { margin-left: auto; font-size: 0.85rem; }

.sidebar {
  position: fixed;
  inset: 74px auto 0 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ddd;
  background: #fff;
}
.sidebar-heading { padding: 1.2rem 1.25rem 0.7rem; color: #666; font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; }
.question-list { overflow-y: auto; padding: 0 0.6rem; }
.question-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 14px;
  text-align: left;
  background: transparent;
}
.question-link.selected { background: #fff1ea; }
.question-badge { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #eee; font-weight: 800; }
.question-badge.done { color: #fff; background: #2e7d32; }
.question-link-copy { min-width: 0; }
.question-link-title { display: block; font-weight: 800; }
.question-link-category { display: block; margin-top: .15rem; color: #666; font-size: .75rem; overflow-wrap: anywhere; }
.finish-button { margin: auto 1rem 1rem; padding: .7rem; border-radius: 12px; background: #f5f5f5; }

.workspace { min-width: 0; margin-left: 280px; padding: 7rem 1rem 2rem; }
.glyph-levels {
  position: fixed;
  bottom: 1rem;
  left: 296px;
  z-index: 21;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
}
.magnify-icon {
  flex: 0 0 auto;
  fill: none;
  stroke: #555;
  stroke-width: 2;
  stroke-linecap: round;
}
.magnify-icon.small { width: 17px; height: 17px; }
.magnify-icon.large { width: 27px; height: 27px; stroke-width: 2.3; }
.glyph-slider {
  width: 120px;
  height: 24px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  accent-color: #e65100;
  background: transparent;
  appearance: none;
}
.glyph-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: #d6d6d6;
}
.glyph-slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 0;
  border-radius: 50%;
  background: #e65100;
  appearance: none;
}
.glyph-slider::-moz-range-track { height: 4px; border-radius: 999px; background: #d6d6d6; }
.glyph-slider::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #e65100; }
.glyph-slider:focus-visible { outline: 2px solid #0288d1; outline-offset: 3px; }

/* Keep the controls and prose fixed while scaling only rendered maths. Wrapping
   each annotated working as one unit keeps its SVG marks aligned with KaTeX. */
.question-math > .katex-display,
.template-piece > .katex,
.answer-example > .katex,
.guided-line > .guided-math > .katex-display,
.guided-line > .distribution-visual,
.guided-line > .combine-like-visual,
.guided-line > .constant-removal-visual,
.guided-line > .division-visual,
.guided-line > .fraction-multiplication-visual {
  zoom: var(--glyph-scale, 1);
}
.question-math { padding: 1rem 0 1rem 4rem; font-size: clamp(1.3rem, 2.3vw, 2.1rem); overflow-x: auto; }
.question-math .katex-display { margin: 0; text-align: left; }
.question-math .katex-display > .katex,
.guided-math .katex-display > .katex,
.actual-math .katex-display > .katex { text-align: left; }

.answer-row { display: flex; align-items: flex-start; gap: 1rem; margin-top: 3rem; padding-left: 4rem; }
.answer-template { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.template-piece { min-height: 44px; display: flex; align-items: center; font-size: clamp(1.3rem, 2.3vw, 2.1rem); }
.input-example { min-width: 0; }
.answer-entry-row { position: relative; display: flex; align-items: center; min-width: 0; }
.answer-input {
  width: 260px;
  height: 44px;
  padding: 0 .9rem;
  border: 1px solid #aaa;
  border-radius: 18px;
  outline: none;
  background: #fff;
}
.answer-entry-row .answer-input { min-width: 0; flex: 1; }
.answer-entry-row.has-radical .answer-input { padding-right: 2.8rem; }
.radical-button {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: #0288d1;
  font-family: "KaTeX_Main", "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1;
  transform: translateY(-50%);
}
.answer-input:focus { border: 2px solid #e65100; }
.answer-input.wrong { border: 2px solid #c62828; animation: jiggle 360ms ease-in-out; }
.answer-row .answer-input { font-size: var(--glyph-input-size, 1.05rem); font-weight: 700; }
.answer-example { display: flex; align-items: baseline; gap: .3rem; margin-top: .35rem; padding-left: .35rem; color: #c62828; font-size: 1rem; }
.answer-example-label { font-weight: 800; }

.round-action { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border-radius: 50%; color: #fff; background: #2e7d32; line-height: 0; }
.check-icon, .action-icon { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.question-badge .check-icon { width: 20px; height: 20px; }
.round-action.wrong { background: #c62828; animation: jiggle 360ms ease-in-out; }
.stepwise-button, .next-question-button, .start-solution-button {
  min-height: 44px;
  padding: 0 1.5rem;
  border-radius: 22px;
  color: #fff;
  background: #0288d1;
  font-weight: 800;
}
.stepwise-button { min-width: 210px; }
.next-question-button { background: #2e7d32; }
@keyframes jiggle { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

.strategy-banner {
  position: fixed;
  right: 1.5rem;
  bottom: .5rem;
  left: 296px;
  z-index: 22;
  padding: 1rem 1.3rem;
  border: 1px solid #81d4fa;
  border-radius: 18px;
  background: #eaf7fd;
  color: #01579b;
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.45;
  animation: banner-in 420ms ease-out;
}
.banner-close { position: absolute; top: 0; right: 0; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border-radius: 50%; color: #fff; background: #01579b; transform: translate(50%, -50%); }
.banner-close .action-icon { width: 14px; height: 14px; }
@keyframes banner-in { from { opacity: 0; transform: translateY(calc(100% + 1rem)); } }
.strategy-banner.leaving {
  pointer-events: none;
  animation: banner-out 420ms ease-in forwards;
}
@keyframes banner-out {
  to { opacity: 0; transform: translateY(calc(100% + 1rem)); }
}

.guided-list { display: grid; gap: 1rem; padding: 1rem 0 0 4rem; }
.guided-line { min-height: 50px; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 1rem; animation: fade-in 260ms ease-out; }
.guided-line.step-divider { padding-bottom: 1rem; border-bottom: 1px solid #b0bec5; }
.guided-line:has(.distribution-visual) { padding-top: 4rem; }
.guided-line:has(.combine-like-visual) { padding-top: 3rem; column-gap: 4rem; }
.guided-math { color: #212121; font-size: clamp(1.3rem, 2.3vw, 2.1rem); white-space: nowrap; }
.guided-math .katex-display { margin: 0; text-align: left; }
.distribution-visual { position: relative; min-width: max-content; }
.distribution-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.distribution-arrow {
  visibility: hidden;
  fill: none;
  stroke: var(--arrow-color);
  stroke-width: 4;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
.distribution-visual.arrows-active .distribution-arrow {
  visibility: visible;
  animation: draw-distribution-arrow 520ms ease-in-out forwards;
}
.distribution-visual.arrows-drawn .distribution-arrow { visibility: visible; }
@keyframes draw-distribution-arrow { to { stroke-dashoffset: 0; } }
.combine-like-visual { position: relative; min-width: max-content; }
.like-term-marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.like-term-highlight, .like-term-highlight * { font-weight: 700 !important; }
.like-term-box, .like-term-connector {
  fill: none;
  stroke: var(--family-color, #1565c0);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.working-active .like-term-box,
.working-active .like-term-connector { animation: draw-like-term-mark 520ms ease-in-out forwards; }
@keyframes draw-like-term-mark { to { stroke-dashoffset: 0; } }
.constant-removal-visual { position: relative; min-width: max-content; padding-bottom: 3rem; }
.balance-operation {
  position: absolute;
  color: #0288d1;
  font-size: clamp(1.3rem, 2.3vw, 2.1rem);
  opacity: 0;
}
.working-active .balance-operation { animation: balance-operation-in 600ms ease-out forwards; }
@keyframes balance-operation-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
.cancellation-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cancellation-stroke {
  fill: none;
  stroke: #c62828;
  stroke-width: 4;
  opacity: .75;
  stroke-linecap: round;
}
.working-active .cancellation-stroke { animation: draw-cancellation 480ms ease-out forwards; }
@keyframes draw-cancellation { to { stroke-dashoffset: 0; } }
.division-visual { position: relative; min-width: max-content; padding-bottom: 3.4rem; }
.division-bar {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: #0288d1;
  transform: scaleX(0);
  transform-origin: left center;
}
.working-active .division-bar { animation: draw-division-bar 520ms ease-out forwards; }
@keyframes draw-division-bar { to { transform: scaleX(1); } }
.division-divisor {
  position: absolute;
  color: #0288d1;
  font-size: clamp(1.3rem, 2.3vw, 2.1rem);
  opacity: 0;
}
.working-active .division-divisor { animation: balance-operation-in 600ms ease-out 250ms forwards; }
.fraction-multiplication-visual { position: relative; min-width: max-content; padding-bottom: 3.4rem; }
.fraction-multiplier {
  position: absolute;
  color: #0288d1;
  font-size: clamp(1.3rem, 2.3vw, 2.1rem);
  opacity: 0;
}
.working-active .fraction-multiplier { animation: balance-operation-in 600ms ease-out forwards; }
.guided-intent { color: #e65100; font-size: .95rem; line-height: 1.4; animation: fade-in 360ms ease-out; }
.start-solution-wrap, .complete-actions { margin-top: 2rem; padding-left: 4rem; }
.start-solution-wrap { margin-top: 6rem; }
.complete-actions { margin-top: 4rem; animation: fade-in 500ms ease-out both; }
@keyframes fade-in { from { opacity: 0; } }
.guided-line-preview { animation: guided-result-in 900ms ease-out both; }
@keyframes guided-result-in { from { opacity: 0; } }

.step-table { width: 100%; margin-top: 6.75rem; border: 1px solid #dfe4e7; border-radius: 14px; overflow: hidden; animation: fade-in 360ms ease-out; }
.step-table.leaving { animation: table-out 360ms ease-in forwards; pointer-events: none; }
.step-table.advancing { transition: margin-top 560ms cubic-bezier(.22, .8, .3, 1); pointer-events: none; }
.step-table.continued { animation: none; }
@keyframes table-out { to { opacity: 0; transform: translateY(-6px); } }
.step-header, .step-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 42%); }
.step-header { color: #e65100; background: #fff3e0; font-size: .78rem; font-weight: 800; }
.step-header > div { padding: .55rem .75rem; text-align: center; }
.step-content { background: #f2f9fd; }
.step-cell { min-width: 0; padding: .8rem; }
.step-cell + .step-cell, .step-header > div + div { border-left: 1px solid #dfe4e7; }
.instruction-line { display: flex; align-items: flex-start; gap: .75rem; font-weight: 700; line-height: 1.5; }
.instruction-copy { min-width: 0; flex: 1; }
.hint-button { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; color: #0288d1; background: transparent; font-size: 1.25rem; }
.bulb-icon { width: 22px; height: 22px; display: block; color: inherit; fill: currentColor; }
.hint-button .bulb-icon { margin: auto; }
.hint-line { display: flex; align-items: flex-start; gap: .35rem; margin-top: .45rem; color: #e65100; font-weight: 500; animation: hint-in 400ms ease-out both; }
.hint-line .bulb-icon { flex: 0 0 auto; color: #0288d1; }
@keyframes hint-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
.child-cell { display: flex; align-items: flex-start; gap: .5rem; }
.child-cell .input-example { min-width: 0; flex: 1; }
.child-cell .answer-entry-row { width: 100%; }
.child-cell .answer-entry-row .answer-input { width: auto; font-size: var(--glyph-input-size, 1.05rem); font-weight: 700; }
.step-next { background: #0288d1; }
.step-action:disabled { opacity: 1; color: #fff; background: #bdbdbd; }
.step-action.wrong:disabled { background: #c62828; }
.verification-math { color: #01579b; font-weight: 800; }

@media (max-width: 900px) {
  .step-header, .step-content { grid-template-columns: minmax(0, 1fr) minmax(300px, 46%); }
}

@media (max-width: 720px) {
  .hero { padding: 1.5rem 4.5rem; }
  .sidebar { display: none; }
  .workspace { margin-left: 0; }
  .progress-label { display: none; }
  .exercise-title { font-size: 1rem; }
  .glyph-levels { bottom: .5rem; left: .5rem; }
  .glyph-slider { width: 90px; }
  .question-math, .answer-row, .guided-list, .start-solution-wrap, .complete-actions { padding-left: 0; }
  .answer-row { flex-direction: column; }
  .stepwise-button { width: 100%; }
  .strategy-banner { left: .5rem; right: 1.5rem; font-size: .95rem; }
  .guided-line { grid-template-columns: minmax(0, 1fr); }
  .step-header { display: none; }
  .step-content { grid-template-columns: 1fr; }
  .step-cell + .step-cell { border-top: 1px solid #dfe4e7; border-left: 0; }
  .option-values input { width: 80px; }
  .option-card { width: 100%; }
  .option-name { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}