/* ============================================================
   Two and Two-Thirds styles.
   Everything is scoped under .math-trainer so the app can be
   embedded into a WordPress/Elementor page without leaking
   styles into the theme (or picking up too many from it).
   ============================================================ */

/* ============================================================
   Open Sans (self-hosted, files in fonts/; variable font, weights 400-700).
   Only the subsets the app needs: latin, latin-ext and the math symbols (√ ± ≥ …)
   ============================================================ */
/* math */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/open-sans-math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/open-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/open-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Root container & design tokens
   ============================================================ */
.math-trainer {
  --clr-bg: #f7f8fc;
  --clr-surface: #ffffff;
  --clr-border: #e2e5ef;
  --clr-primary: #1a73e8;
  --clr-primary-h: #1557b0;
  --clr-text: #1d2433;
  --clr-muted: #6b7280;
  --clr-success: #1a773e;
  --clr-retry: #f59e0b;
  /* wrong answer / solved with retries */
  --clr-retry-bg: #fffbeb;
  --clr-retry-text: #f59e0b;
  --clr-easy: #dcfce7;
  --clr-easy-text: #1a773e;
  --clr-med: #fffbeb;
  --clr-med-text: #f59e0b;
  --clr-hard: #fee2e2;
  --clr-hard-text: #991b1b;
  --fs-control: 1rem;
  /* one size for inputs, buttons and feedback */
  --clr-divider: rgba(29, 36, 51, .14);   /* thin semi-transparent lines between blocks, works on any background */
  --clr-hover: rgba(26, 115, 232, .06);   /* faint tint under the item the pointer is over */
  --radius-control: 8px;                  /* corners of inputs and buttons only */
  --font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  background: var(--page-bg, var(--clr-bg));   /* --page-bg: optional override, see js/embed.js */
  color: var(--clr-text);
  text-align: left;
}

/* ============================================================
   Scoped reset — neutralise common theme styles
   ============================================================ */
.math-trainer *,
.math-trainer *::before,
.math-trainer *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.math-trainer h1,
.math-trainer h2,
.math-trainer h3,
.math-trainer p {
  font-family: inherit;
  color: inherit;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}

.math-trainer p {
  font-size: 1rem;
  /* one size for every paragraph */
  line-height: 1.5;
}

.math-trainer button,
.math-trainer input {
  font-family: inherit;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  min-height: 0;
}

.math-trainer ol,
.math-trainer ul {
  list-style: none;
}

/* ============================================================
   Header
   ============================================================ */
/*.math-trainer .site-header {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
}*/

.math-trainer .header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.math-trainer .logo {
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--clr-primary);
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.math-trainer .logo:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.math-trainer .logo-mark {
  /* "2 2/3" drawn from plain digits: the ⅔ glyph is not in the font subsets */
  margin-right: 4px;
}

.math-trainer .logo-frac {
  font-size: 0.62em;
  margin-left: 1px;
}

.math-trainer .logo-frac sup,
.math-trainer .logo-frac sub {
  font-size: 1em;
  line-height: 0;
}

.math-trainer .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  color: var(--clr-muted);
  margin-top: 3px;
}

.math-trainer .breadcrumb-item {
  cursor: pointer;
}

.math-trainer .breadcrumb-item:hover {
  color: var(--clr-primary);
  text-decoration: underline;
}

.math-trainer .breadcrumb-item.active {
  color: var(--clr-text);
  cursor: default;
  text-decoration: none;
}

.math-trainer .breadcrumb-sep {
  user-select: none;
}

/* ============================================================
   Views (SPA routing)
   ============================================================ */
.math-trainer .view {
  display: none;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 24px 80px;
}

.math-trainer .view.active {
  display: block;
}

/* ============================================================
   Home — Hero
   ============================================================ */
.math-trainer .hero {
  margin-bottom: 40px;
}

.math-trainer .hero h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}

.math-trainer .hero p {
  color: var(--clr-muted);
  text-align: center;
}

/* ============================================================
   Home — Topic grid
   ============================================================ */
.math-trainer .topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* three in a row (one column on tablet and phone, see Responsive) */
  column-gap: 24px;
  row-gap: 0;
}

.math-trainer .topic-card {
  text-align: center;
  border-bottom: 1px solid var(--clr-divider);
  padding: 28px 24px;
  cursor: pointer;
  user-select: none;
}

.math-trainer .topic-card h2 {
  transition: color .15s;
}

.math-trainer .topic-card:hover:not(.disabled) h2 {
  color: var(--clr-primary);
}

.math-trainer .topic-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.math-trainer .topic-icon {
  font-size: 1.8rem;
  margin-bottom: 14px;
  color: var(--clr-primary);
}

.math-trainer .topic-card h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.math-trainer .topic-card p {
  color: var(--clr-muted);
}

/* ============================================================
   Equations — Subtopic list
   ============================================================ */
.math-trainer .subtopic-header {
  margin-bottom: 32px;
}

.math-trainer .subtopic-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.math-trainer .subtopic-header p {
  color: var(--clr-muted);
}

.math-trainer .subtopic-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--clr-divider);
}

/* rows with a rule underneath; the title turns blue under the pointer */
.math-trainer .subtopic-card {
  position: relative;
  border-bottom: 1px solid var(--clr-divider);
  padding: 22px 0;
  cursor: pointer;
}

.math-trainer .subtopic-card h3 {
  transition: color .15s;
}

.math-trainer .subtopic-card:hover:not(.disabled) h3 {
  color: var(--clr-primary);
}

.math-trainer .subtopic-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* green check on completed levels */
.math-trainer .subtopic-check {
  display: none;
  position: absolute;
  top: 18px;
  right: 0;
  width: 24px;
  height: 24px;
  color: var(--clr-success);
}

.math-trainer .subtopic-check svg {
  display: block;
  width: 100%;
  height: 100%;
}

.math-trainer .subtopic-card.completed .subtopic-check {
  display: block;
}

.math-trainer .subtopic-meta {
  margin-bottom: 8px;
}

.math-trainer .difficulty {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.math-trainer .difficulty.easy {
  color: var(--clr-easy-text);
}

.math-trainer .difficulty.medium {
  color: var(--clr-med-text);
}

.math-trainer .difficulty.hard {
  color: var(--clr-hard-text);
}

.math-trainer .subtopic-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.math-trainer .subtopic-card p {
  color: var(--clr-muted);
}

/* ============================================================
   Practice view
   ============================================================ */
.math-trainer .practice-container {
  max-width: 720px;
  margin: 0 auto;
}

/* Session progress */
.math-trainer .progress {
  margin-bottom: 60px;
}

.math-trainer .progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--clr-muted);
  margin-bottom: 8px;
}

.math-trainer .progress-track {
  display: flex;
  gap: 4px;
}

.math-trainer .progress-seg {
  position: relative;
  padding: 0;
  border: none;
  cursor: pointer;
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--clr-border);
  transition: background .2s;
}

.math-trainer .progress-seg:hover {
  opacity: 0.75;
}

/* larger invisible click area (the visible bar is only 8px high) */
.math-trainer .progress-seg::after {
  content: '';
  position: absolute;
  inset: -8px -2px;
}

.math-trainer .progress-seg.correct {
  background: var(--clr-success);
}

/* the problem being viewed: ring around the segment, whatever its colour */
.math-trainer .progress-seg.current {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

/* Set complete panel */
.math-trainer .session-complete {
  margin-top: 28px;
  padding: 24px 0 0;
  border-top: 1px solid var(--clr-divider);
}

.math-trainer .session-complete h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.math-trainer .session-complete p {
  color: var(--clr-muted);
  margin-bottom: 18px;
}

.math-trainer .session-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.math-trainer .problem-box {
  padding: 0 0 28px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--clr-divider);
}

.math-trainer .problem-text {
  margin-bottom: 20px;
}

.math-trainer .problem-graph {
  margin-top: 16px;
}

.math-trainer .problem-label {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--clr-text);
}

.math-trainer .problem-box .katex {
  font-size: 2rem;
}

/* ============================================================
   Graphs
   ============================================================ */
.math-trainer .graph-svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  touch-action: pan-y;   /* vertical scrolling still works over the graph on phones */
  overflow: visible;
}

.math-trainer .graph-grid      { stroke: var(--clr-border); stroke-width: 1; }
.math-trainer .graph-tickmark  { stroke: var(--clr-text); stroke-width: 1.5; }
.math-trainer .graph-axis      { stroke: var(--clr-text); stroke-width: 2; }
.math-trainer .graph-arrow     { stroke: var(--clr-text); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.math-trainer .graph-line      { stroke: var(--clr-primary); stroke-width: 3; fill: none; stroke-linecap: round; }

.math-trainer .graph-tick {
  fill: var(--clr-muted);
  font-size: 13px;
  font-family: var(--font);
}

.math-trainer .graph-label {
  fill: var(--clr-text);
  font-size: 18px;
  font-style: italic;
  font-family: 'Times New Roman', Georgia, serif;
}

.math-trainer .graph-guide {
  stroke: var(--clr-primary);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.math-trainer .graph-dot {
  fill: var(--clr-primary);
  stroke: var(--clr-surface);
  stroke-width: 2;
}

.math-trainer .graph-tip {
  fill: var(--clr-text);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  paint-order: stroke;
  stroke: var(--clr-surface);
  stroke-width: 4px;
  pointer-events: none;
}

.math-trainer .graph-hit {
  cursor: crosshair;
}

.math-trainer .graph-caption {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--clr-muted);
  text-align: center;
}

/* ============================================================
   Multiple choice
   ============================================================ */
.math-trainer .answer-row.choice {
  flex-direction: column;
  align-items: stretch;
}

.math-trainer .answer-row.choice .answer-inputs {
  max-width: none;
}

.math-trainer .answer-row.choice #btn-check {
  align-self: flex-start;
}

.math-trainer .choice-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.math-trainer .choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--clr-divider);
  cursor: pointer;
  transition: background .15s;
}

.math-trainer .choice:first-child {
  padding-top: 0;
}

.math-trainer .choice:last-child {
  border-bottom: none;
}

/* .math-trainer .choice:hover {
  background: var(--clr-hover);
} */

.math-trainer .choice input {
  margin-top: 8px;
  accent-color: var(--clr-primary);
  flex-shrink: 0;
}

/* a coloured bar on the left and a faint tint mark the state */
.math-trainer .choice.incorrect {
  background: rgba(245, 158, 11, .12);
  box-shadow: inset 3px 0 0 var(--clr-retry);
}

.math-trainer .choice.correct {
  background: rgba(22, 163, 74, .10);
  box-shadow: inset 3px 0 0 var(--clr-success);
}

.math-trainer .choice:has(input:disabled) {
  cursor: default;
}

.math-trainer .problem-equation {
  font-size: 1.5rem;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Answer area */


.math-trainer .answer-row {
  display: flex;
  align-items: flex-end;   /* Check stays next to the last input when there are several */
  gap: 12px;
  padding: 0;
  border-bottom: 0;
}

.math-trainer .answer-label {
  flex: 0 0 8.5em;          /* named fields line up: "1st part (cm)", "Width"… */
  color: var(--clr-muted);
}

.math-trainer .answer-prefix {
  font-size: 1.1rem;
  white-space: nowrap;
  min-width: 36px;
}

/* one field per expected answer: optional "x =" in front, then the input */
.math-trainer .answer-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  max-width: 320px;
}

.math-trainer .answer-field {
  display: flex;
  align-items: center;
  gap: 12px;
}

.math-trainer .answer-hint {
  margin-top: 10px;
  color: var(--clr-muted);
}

.math-trainer .answer-input {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 44px;
  padding: 0 14px;
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-control);
  font-size: var(--fs-control);
  font-family: var(--font);
  color: var(--clr-text);
  background: var(--clr-surface);
  transition: border-color .15s;
  outline: none;
}

.math-trainer .answer-input:focus {
  border-color: var(--clr-primary);
}

.math-trainer .answer-input.correct {
  border-color: var(--clr-success);
  background: #f0fdf4;
}

.math-trainer .answer-input.incorrect {
  border-color: var(--clr-retry);
  background: var(--clr-retry-bg);
}

/* Feedback */
.math-trainer .feedback {
  margin-top: 12px;
  font-size: var(--fs-control);
  font-weight: 500;
  min-height: 24px;
}

.math-trainer .feedback.correct {
  color: var(--clr-success);
}

.math-trainer .feedback.incorrect {
  color: var(--clr-retry-text);
}

/* ============================================================
   Buttons
   ============================================================ */
.math-trainer .btn {
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: var(--radius-control);
  font-size: var(--fs-control);
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  white-space: nowrap;
}

.math-trainer .btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.math-trainer .btn-primary {
  background: var(--clr-primary);
  color: #fff;
}

.math-trainer .btn-primary:hover {
  background: var(--clr-primary-h);
}

.math-trainer .btn-secondary {
  background: transparent;
  color: var(--clr-primary);
  border: 2px solid var(--clr-primary);
}

.math-trainer .btn-secondary:hover {
  background: var(--clr-hover);
}

.math-trainer .btn-ghost {
  background: transparent;
  color: var(--clr-muted);
  border: 1px solid var(--clr-border);
}

.math-trainer .btn-ghost:hover {
  background: var(--clr-bg);
  color: var(--clr-text);
}

.math-trainer .solution-area {
  margin-bottom: 48px;
}

/* previous / next sit at the very end, under a rule */
/* a button that looks like plain blue text (the solution toggle) */
.math-trainer .btn-link {
  height: auto;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--clr-primary);
  font-weight: 600;
}

.math-trainer .btn-link:hover {
  color: var(--clr-primary-h);
  text-decoration: underline;
}

.math-trainer .btn-link:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.math-trainer .practice-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 56px;
  border-top: 1px solid var(--clr-divider);
}

/* ============================================================
   Step-by-step solution box
   ============================================================ */
.math-trainer .steps-box {
  margin-top: 16px;
  position: relative;
}

/* the whole solution scrolls sideways when a formula is too wide;
   the edges fade out (a mask, so it works on any background, even a transparent one) only
   on the sides where there is more to scroll (classes set by updateStepsFade in ui.js).
   The scrollbar is styled so it stays visible instead of hiding like the system overlay one */
.math-trainer .steps-scroll {
  --pad-x: 24px;            /* free space after the end of a wide formula */
  --fade-l: 0px;
  --fade-r: 0px;
  padding: 16px 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #b4bccb transparent;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}

.math-trainer .steps-box.fade-left .steps-scroll  { --fade-l: 36px; }
.math-trainer .steps-box.fade-right .steps-scroll { --fade-r: 36px; }

.math-trainer .steps-scroll::-webkit-scrollbar {
  height: 10px;
}

.math-trainer .steps-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.math-trainer .steps-scroll::-webkit-scrollbar-thumb {
  background: #b4bccb;
  background-clip: padding-box;
  border-radius: 5px;
  border: 2px solid transparent;
}

.math-trainer .steps-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--clr-muted);
  background-clip: padding-box;
}

.math-trainer .steps-box h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--clr-text);
}

.math-trainer .steps-list {
  list-style: none;
  counter-reset: step-counter;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.math-trainer .steps-list li {
  counter-increment: step-counter;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);   /* minmax(0,…): let long formulas shrink the column instead of overflowing */
  gap: 14px;
  align-items: start;
}

.math-trainer .steps-list li::before {
  content: counter(step-counter);
  background: var(--clr-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
}

.math-trainer .step-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.math-trainer .step-explanation {
  font-size: 1rem;
  color: var(--clr-muted);
}

.math-trainer .step-math {
  font-size: 1rem;
  padding: 10px 0 12px;   /* breathing room around the formula */
  /* may be wider than the column: the extra width scrolls with the whole solution box.
     content-box + padding-right: the browser ignores the scroller's own right padding for
     overflowing content, so this keeps the same space at the right end as at the left.
     For short formulas the extra padding sits inside the scroller's padding, so nothing scrolls. */
  box-sizing: content-box;
  width: max-content;
  min-width: 100%;
  padding-right: var(--pad-x);
}

/* KaTeX gives every display formula a 1em vertical margin; here it is 0.5em.
   Scoped to .math-trainer, which already beats KaTeX's own rule (no !important needed)
   and leaves the host site's formulas alone. */
.math-trainer .katex-display {
  margin: 0.5em 0;
}

/* formulas at the same size as paragraphs; scoped so the host site's own KaTeX is untouched */
.math-trainer .katex {
  font-size: 1rem;
}

/* ============================================================
   Responsive
   ============================================================ */
/* Desktop: the cards form rows of three, every row except the last one has a rule under it.
   The last row is the card that starts it (1st, 4th, 7th, ... counting from the end: one of
   the last three) and the cards after it. Works for any number of cards. */
@media (min-width: 901px) {
  .math-trainer .topic-card:nth-child(3n+1):nth-last-child(-n+3),
  .math-trainer .topic-card:nth-child(3n+1):nth-last-child(-n+3) ~ .topic-card {
    border-bottom: none;
  }
}

/* Tablet and phone: one column, every card has a rule under it except the last one */
@media (max-width: 900px) {
  .math-trainer .topic-grid {
    grid-template-columns: 1fr;
  }

  .math-trainer .topic-card:last-child {
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .math-trainer .view {
    padding: 24px 16px 60px;
  }

  .math-trainer .problem-box {
    padding-bottom: 20px;
  }

  .math-trainer .problem-equation {
    font-size: 1.2rem;
  }

  .math-trainer .answer-row {
    flex-wrap: wrap;
  }

  .math-trainer .answer-inputs {
    max-width: 100%;
    width: 100%;
  }

  .math-trainer .steps-scroll {
    --pad-x: 16px;
  }
}