:root {
  --blue: #155eef;
  --blue-dark: #0b3fba;
  --blue-soft: #eaf2ff;
  --ink: #172033;
  --muted: #667085;
  --line: #d8e0ee;
  --surface: #ffffff;
  --bg: #f3f7fc;
  --green: #12805c;
  --green-soft: #e7f8f1;
  --orange: #b54708;
  --orange-soft: #fff4e5;
  --red: #c4320a;
  --shadow: 0 18px 50px rgba(28, 56, 104, .11);
  font-family: ui-rounded, "Arial Rounded MT Bold", Nunito, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg, #edf4ff 0, var(--bg) 340px); min-height: 100vh; min-height: 100dvh; }
button, input, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.site-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 24px;
}
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  color: white; background: var(--blue); font-weight: 900; font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(21, 94, 239, .24); transform: rotate(-2deg);
}
.brand strong { display: block; font-size: 1.35rem; letter-spacing: -.02em; }
.brand small { display: block; color: var(--muted); margin-top: 2px; font-size: .82rem; }
.name-field { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; font-weight: 700; }
.name-field span small { font-size: .75rem; font-weight: 600; }
.name-field input { width: 170px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: white; color: var(--ink); }
.name-field input:focus, input:focus, select:focus { outline: 3px solid rgba(21,94,239,.2); border-color: var(--blue); }

.app-shell { max-width: 1240px; margin: 0 auto; padding: 0 24px 36px; }
.main-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 20px; }
.main-tab {
  display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line);
  background: rgba(255,255,255,.74); padding: 14px 18px; border-radius: 16px; color: var(--ink);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.main-tab:hover { transform: translateY(-1px); border-color: #9dbaf6; }
.main-tab.active { border-color: var(--blue); background: var(--surface); box-shadow: 0 8px 24px rgba(21,94,239,.1); }
.tab-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #dfeaff; color: var(--blue-dark); font-weight: 900; }
.main-tab.active .tab-number { background: var(--blue); color: white; }
.main-tab strong, .main-tab small { display: block; }
.main-tab strong { font-size: 1rem; }
.main-tab small { color: var(--muted); margin-top: 2px; font-size: .8rem; }

.workspace { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; min-height: 610px; min-height: min(610px, calc(100dvh - 170px)); box-shadow: var(--shadow); overflow: hidden; }
.two-column { display: grid; grid-template-columns: minmax(360px, .85fr) 1.15fr; }
.settings-card { padding: 34px; border-right: 1px solid var(--line); }
.eyebrow { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); font-size: .76rem; font-weight: 900; }
h1, h2, p { overflow-wrap: break-word; }
h1 { margin: 0 0 26px; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.08; letter-spacing: -.04em; }
h2 { margin: 0; font-size: clamp(1.35rem, 2.3vw, 1.9rem); letter-spacing: -.03em; }
.intro { color: var(--muted); line-height: 1.55; margin: -14px 0 24px; }
fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
legend, .select-field > span { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin-bottom: 9px; color: #344054; font-size: .9rem; font-weight: 800; }
.text-button { border: 0; background: transparent; color: var(--blue); font-size: .78rem; font-weight: 800; padding: 2px 0; }
.choice-grid { display: grid; gap: 8px; }
.mode-grid { grid-template-columns: 1fr 1fr; }
.choice {
  min-height: 54px; border: 1px solid var(--line); background: white; border-radius: 12px;
  color: #344054; padding: 9px 11px; font-size: .84rem; font-weight: 800; display: flex; align-items: center; gap: 9px;
}
.choice span { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; background: #f1f4f9; font-size: 1.15rem; }
.choice:hover { border-color: #9dbaf6; }
.choice.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark); box-shadow: inset 0 0 0 1px var(--blue); }
.choice.active span { background: var(--blue); color: white; }
.choice.wide { grid-column: 1 / -1; justify-content: center; }
.table-choices { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.table-button { min-width: 0; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; background: white; color: #344054; font-weight: 900; }
.table-button.active { background: var(--blue); border-color: var(--blue); color: white; }
.select-field { display: block; margin: 0 0 18px; }
select { width: 100%; min-height: 46px; padding: 10px 38px 10px 12px; border: 1px solid var(--line); background: white; border-radius: 11px; color: var(--ink); }
.primary-button, .secondary-button, .back-button, .speak-button {
  border-radius: 12px; min-height: 46px; padding: 11px 18px; font-weight: 900; transition: transform .16s ease, background .16s ease;
}
.primary-button { width: 100%; border: 1px solid var(--blue); color: white; background: var(--blue); box-shadow: 0 8px 18px rgba(21,94,239,.2); }
.primary-button:hover { background: var(--blue-dark); transform: translateY(-1px); }
.primary-button.compact { width: auto; min-width: 180px; }
.secondary-button { border: 1px solid #aabbd8; color: var(--blue-dark); background: white; }
.back-button, .speak-button { border: 1px solid var(--line); color: #344054; background: white; }
.speak-button { min-height: 40px; padding: 8px 13px; font-size: .86rem; }
.welcome-card { padding: 54px clamp(36px, 6vw, 80px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 75% 25%, #fff5cc 0, transparent 26%), linear-gradient(145deg, #f8fbff, #edf4ff); }
.number-cloud { display: flex; align-items: center; gap: clamp(7px, 1.3vw, 15px); margin-bottom: 34px; }
.number-cloud b { width: clamp(46px, 6vw, 76px); height: clamp(52px, 7vw, 86px); display: grid; place-items: center; border-radius: 17px; background: white; border: 1px solid #cbd9ef; box-shadow: 0 9px 0 #d5e4fa; font-size: clamp(1.6rem, 4vw, 3.2rem); color: var(--blue-dark); transform: rotate(-2deg); }
.number-cloud b:nth-child(even) { background: var(--blue); color: white; transform: rotate(2deg); box-shadow: 0 9px 0 #a8c3f7; }
.welcome-card > p { color: var(--muted); line-height: 1.65; max-width: 570px; }
.feature-list { list-style: none; margin: 17px 0 0; padding: 0; display: grid; gap: 11px; color: #344054; font-weight: 700; }
.feature-list span { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 7px; border-radius: 50%; color: white; background: var(--green); font-size: .78rem; }

.exercise-view { background: white; border: 1px solid var(--line); border-radius: 24px; min-height: 610px; min-height: min(610px, calc(100dvh - 170px)); box-shadow: var(--shadow); padding: clamp(14px, 2.5vw, 24px); }
.exercise-toolbar { display: grid; grid-template-columns: 1fr minmax(230px, 1fr) 1fr; align-items: center; gap: 20px; }
.exercise-toolbar .back-button { justify-self: start; }
.progress-wrap { text-align: center; color: var(--muted); font-size: .83rem; font-weight: 800; }
.progress-track { height: 9px; margin-top: 7px; border-radius: 20px; overflow: hidden; background: #e6edf7; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width .3s ease; }
.score-pill { justify-self: end; border-radius: 999px; background: #fff7d6; color: #8c6500; padding: 10px 15px; font-weight: 700; }
.problem-card { width: min(100%, 680px); margin: clamp(20px, 5vh, 48px) auto 0; padding: clamp(24px, 4vw, 42px) clamp(14px, 5vw, 50px); text-align: center; background: #fbfdff; border: 1px solid var(--line); border-radius: 22px; }
.problem-line { margin: 18px 0 22px; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2.5vw, 18px); font-weight: 900; font-variant-numeric: tabular-nums; font-size: clamp(2.15rem, 8vw, 5.8rem); letter-spacing: -.05em; }
.problem-line span:not(:first-child) { color: var(--muted); }
.problem-line .answer-blank { color: var(--blue); }
.answer-field { display: block; width: min(100%, 330px); margin: 24px auto 9px; text-align: left; }
.answer-field span { display: block; color: #475467; font-weight: 800; font-size: .9rem; margin-bottom: 7px; }
.answer-field input { width: 100%; min-height: 64px; text-align: center; border: 2px solid #b8c6db; border-radius: 13px; color: var(--ink); background: white; font-size: 1.7rem; font-weight: 900; }
.answer-field input[readonly] { cursor: default; caret-color: transparent; }
.number-pad { width: min(100%, 270px); margin: 9px auto 7px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(4px, 1vw, 6px); }
.number-key { min-width: 0; min-height: clamp(38px, 8vw, 42px); border: 1px solid #b8c6db; border-radius: 9px; padding: 5px; color: #26364f; background: white; font-size: clamp(.95rem, 3vw, 1.05rem); font-weight: 900; }
.number-key:hover, .number-key:focus-visible { border-color: var(--blue); background: var(--blue-soft); outline: none; }
.number-key:active { transform: translateY(1px); background: #dce9ff; }
.number-key.action-key { color: var(--blue-dark); background: #f4f7fb; font-size: .78rem; }
.number-pad.pad-disabled { opacity: .45; pointer-events: none; }
.input-help { margin: 0 auto; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.feedback { min-height: 31px; margin-top: 15px; line-height: 1.45; font-weight: 800; }
.feedback.good { color: var(--green); }
.feedback.try { color: var(--orange); }
.feedback.bad { color: var(--red); }
.problem-card .secondary-button { margin-top: 4px; }
.result-card { min-height: 610px; min-height: min(610px, calc(100dvh - 170px)); display: grid; align-content: center; justify-items: center; text-align: center; padding: clamp(24px, 5vw, 42px); background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.result-icon { width: 86px; height: 86px; margin-bottom: 19px; display: grid; place-items: center; border-radius: 26px; background: #fff2b8; color: #9b7000; font-size: 2.8rem; transform: rotate(-4deg); }
.result-score { font-size: 1.25rem; color: #344054; margin: 14px 0 23px; }
.result-actions { display: flex; gap: 10px; }

.written-layout { display: grid; grid-template-columns: minmax(330px, .72fr) 1.28fr; }
.written-settings { border-right: 1px solid var(--line); }
.adult-note { margin-top: 28px; padding: 16px; border-left: 4px solid #fdb022; border-radius: 8px; background: #fff8e8; }
.adult-note strong { display: block; font-size: .86rem; color: #7a4d00; }
.adult-note p { color: #694b18; margin: 6px 0 0; line-height: 1.5; font-size: .85rem; }
.written-stage { min-width: 0; padding: 34px clamp(24px, 4vw, 52px); scroll-margin-top: 12px; background: #fbfdff; }
.stage-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.instruction { margin: 24px 0 16px; min-height: 58px; padding: 15px 17px; border-radius: 13px; background: var(--blue-soft); color: #173f8f; line-height: 1.5; font-weight: 800; }
.math-paper { min-height: 300px; display: grid; place-items: center; overflow-x: auto; padding: 27px 18px; border: 1px solid #ccd9ec; border-radius: 16px; background-color: white; background-image: linear-gradient(#e7eef8 1px, transparent 1px), linear-gradient(90deg, #e7eef8 1px, transparent 1px); background-size: 32px 32px; }
.column-math { display: grid; gap: 5px; font-family: "Arial Rounded MT Bold", Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.math-row { display: grid; grid-template-columns: 42px repeat(var(--columns), 58px); justify-content: end; align-items: center; }
.math-cell { position: relative; min-height: 59px; display: grid; place-items: center; border-radius: 9px; font-size: 2.15rem; font-weight: 900; }
.math-cell.active { color: var(--blue-dark); background: #dce9ff; outline: 3px solid var(--blue); outline-offset: -3px; }
.math-cell.filled { color: var(--green); }
.math-cell.changed .old-digit {
  color: var(--red);
  text-decoration: line-through 3px;
  text-decoration-color: var(--red);
}
.math-cell.changed .new-digit {
  position: absolute;
  top: -22px;
  left: 50%;
  z-index: 1;
  min-width: 1.6em;
  transform: translateX(-50%);
  color: var(--blue-dark);
  font-size: clamp(.9rem, 2.7vw, 1.08rem);
  line-height: 1;
  text-align: center;
}
.math-cell.filled.omitted-leading-zero { color: #98a2b3; }
.omitted-leading-zero span {
  text-decoration: line-through 3px;
  text-decoration-color: var(--red);
}
.operator-cell { font-size: 2rem; font-weight: 900; text-align: center; }
.carry-row .math-cell { min-height: 34px; color: var(--orange); font-size: 1.05rem; align-self: end; }
.answer-row { border-top: 4px solid var(--ink); }
.partial-row { border-top: 2px solid #98a2b3; }
.place-labels .math-cell { min-height: 25px; color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.written-answer { display: flex; align-items: end; justify-content: center; gap: 12px; margin-top: 15px; }
.written-entry { width: min(100%, 330px); }
.compact-field { width: min(100%, 220px); margin: 0 auto 9px; }
.compact-field input { min-height: 52px; font-size: 1.4rem; }
.division-work { width: min(700px, 100%); }
.school-division {
  --division-cell: 58px;
  display: grid;
  grid-template-columns: max-content minmax(calc(var(--quotient-columns) * var(--division-cell)), 1fr);
  align-items: stretch;
  justify-content: center;
  min-width: max-content;
  font-family: "Arial Rounded MT Bold", Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}
.school-division-left { min-width: 0; }
.first-chunk-marker,
.school-division-row,
.school-division-rule,
.bring-down-arrow {
  display: grid;
  grid-template-columns: 36px repeat(var(--div-columns), var(--division-cell));
}
.first-chunk-marker { height: 24px; }
.first-chunk-marker::before {
  content: "";
  grid-column: var(--chunk-start) / var(--chunk-end);
  width: calc(100% - 12px);
  justify-self: center;
  margin-top: 7px;
  border-top: 4px solid #12b76a;
  border-radius: 50% 50% 0 0;
}
.school-division-row { align-items: center; min-height: 56px; }
.dividend-row { min-height: 64px; }
.school-division-sign { display: grid; place-items: center; color: #ff7a45; font-size: 1.65rem; }
.school-division-cell { min-width: var(--division-cell); text-align: center; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.dividend-row .school-division-cell { color: var(--ink); }
.dividend-row .active-digit { color: var(--blue-dark); background: #e5efff; border-radius: 10px; }
.product-row .school-division-cell { position: relative; color: #375bd2; }
.inline-minus { position: absolute; left: -21px; color: #ff7a45; font-size: 1.65rem; }
.current-row .school-division-cell { color: #9c2aa0; }
.current-row.active-current .school-division-cell.has-digit { background: #f5e9fa; border-radius: 9px; }
.remainder-row .school-division-cell { color: #f79009; }
.school-division-rule { height: 5px; }
.school-division-rule::before {
  content: "";
  grid-column: var(--rule-start) / var(--rule-end);
  border-top: 4px solid var(--ink);
}
.bring-down-arrow { height: 26px; margin-top: -4px; align-items: center; }
.bring-down-arrow span { color: #9c2aa0; text-align: center; font-size: 1.8rem; line-height: 1; }
.school-division-right { display: flex; min-width: calc(var(--quotient-columns) * var(--division-cell)); flex-direction: column; border-left: 4px solid var(--ink); }
.school-division-divisor { min-height: 88px; display: grid; place-items: end start; padding: 0 12px 10px; border-bottom: 5px solid var(--ink); font-size: clamp(2rem, 5vw, 3rem); }
.school-division-quotient { flex: 1; min-height: 190px; display: grid; grid-template-columns: repeat(var(--quotient-columns), var(--division-cell)); align-items: stretch; }
.quotient-cell { display: grid; place-items: start center; padding-top: 10px; border-right: 1px solid #98a2b3; color: #12b76a; font-size: clamp(2rem, 5vw, 3rem); }
.quotient-cell.active-quotient { color: var(--blue); background: rgba(220,233,255,.68); }
.done-banner { padding: 22px; text-align: center; }
.done-banner strong { display: block; color: var(--green); font-size: 1.25rem; margin-bottom: 7px; }

footer { max-width: 1240px; margin: 0 auto; padding: 3px 24px 28px; display: flex; justify-content: center; text-align: center; gap: 18px; color: var(--muted); font-size: .78rem; }

@media (max-width: 820px) {
  .site-header { align-items: flex-start; }
  .name-field { flex-direction: column; align-items: flex-start; gap: 5px; }
  .two-column, .written-layout { grid-template-columns: 1fr; }
  .settings-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .welcome-card { padding: 42px 30px; }
  .exercise-toolbar { grid-template-columns: 1fr 1fr; }
  .progress-wrap { grid-row: 2; grid-column: 1 / -1; }
  .problem-card { padding: 34px 20px; }
}

@media (max-width: 560px) {
  .site-header { padding: 13px 15px; gap: 10px; }
  .brand small, .name-field > span { display: none; }
  .brand-mark { width: 46px; height: 46px; border-radius: 13px; }
  .name-field input { width: 130px; }
  .app-shell { padding: 0 10px 24px; }
  .main-tabs { gap: 7px; }
  .main-tab { padding: 10px; gap: 8px; }
  .main-tab small { display: none; }
  .tab-number { width: 31px; height: 31px; }
  .settings-card, .written-stage { padding: 24px 18px; }
  .table-choices { grid-template-columns: repeat(6, 1fr); }
  .problem-line { gap: 10px; }
  .problem-card { margin-top: 24px; }
  .exercise-view { padding: 14px; }
  .exercise-toolbar { gap: 10px; }
  .score-pill { padding: 8px 10px; font-size: .78rem; }
  .back-button { padding: 8px 10px; font-size: .78rem; }
  .written-answer { align-items: center; flex-direction: column; }
  .written-entry { width: min(100%, 330px); }
  .compact-field, .written-answer .primary-button { width: 100%; }
  .math-row { grid-template-columns: 30px repeat(var(--columns), 48px); }
  .math-cell { min-height: 50px; font-size: 1.72rem; }
  .school-division { --division-cell: 48px; }
  .first-chunk-marker, .school-division-row, .school-division-rule, .bring-down-arrow { grid-template-columns: 28px repeat(var(--div-columns), var(--division-cell)); }
  .school-division-sign { font-size: 1.35rem; }
  footer { flex-direction: column; padding-inline: 16px; }
}

@media (max-width: 380px) {
  .written-stage { padding-inline: 10px; }
  .problem-card { padding-inline: 10px; border-radius: 16px; }
  .problem-line { gap: 6px; font-size: clamp(2rem, 12vw, 2.8rem); }
  .number-pad { width: min(100%, 246px); }
  .math-paper { padding-inline: 6px; }
  .math-row { grid-template-columns: 22px repeat(var(--columns), minmax(0, 36px)); }
  .math-cell { min-height: 44px; font-size: 1.45rem; }
  .operator-cell { font-size: 1.55rem; }
  .school-division { --division-cell: 32px; }
  .first-chunk-marker, .school-division-row, .school-division-rule, .bring-down-arrow { grid-template-columns: 20px repeat(var(--div-columns), var(--division-cell)); }
  .school-division-cell, .school-division-divisor, .quotient-cell { font-size: 1.55rem; }
  .school-division-divisor { padding-inline: 6px; }
}

@media print {
  body { background: white; }
  .site-header, .main-tabs, .settings-card, .exercise-toolbar, footer, button { display: none !important; }
  .app-shell { padding: 0; max-width: none; }
  .result-card, .workspace, .exercise-view { box-shadow: none; border: 0; min-height: auto; }
  .written-layout { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}