style(trainer): полировка UX — кнопки-варианты, инлайн-KaTeX в решении, моб. вёрстка

Визуальная доводка страницы /trainer (логика/ID не тронуты):
- Варианты выбора (choice/verify): глубина (clay-тень, градиент), единая высота 60px,
  крупный шрифт, hover-подъём, press-сжатие, pop при верном/shake при неверном.
- Инлайн-формулы в пояснениях решения: соразмерны тексту (katex 1.02em) и подсвечены
  индиго (accent-ink); формула-строка katex 1.05em — гармония с прозой.
- Мобильная вёрстка (≤620): варианты в один столбец, кнопка «Дальше» на всю ширину,
  чертёж компактнее, формула-строка решения без отступа.

Превью визуала (реальный CSS+KaTeX+задачи) — scratchpad/trainer_preview.html.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/trainer.html

@@ -238,13 +238,21 @@
     .tr-fm-btn.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 8px 16px -6px rgba(99,102,241,.5); }
 
     /* ── варианты выбора (kind choice / verify) ── */
-    .tr-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; margin: 0 auto 4px; }
+    .tr-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; max-width: 470px; margin: 4px auto 2px; }
-    .tr-choice-btn { font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer; padding: 14px 16px; border-radius: 15px; border: 2px solid rgba(99,102,241,.22); background: #fbfbff; color: var(--ink); transition: .14s var(--ease); }
+    .tr-choice-btn {
-    .tr-choice-btn:hover:not(:disabled) { border-color: var(--g1); background: #fff; transform: translateY(-1px); }
+      font: inherit; font-size: 1.22rem; font-weight: 800; cursor: pointer; min-height: 60px;
-    .tr-choice-btn:disabled { cursor: default; }
+      display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px;
-    .tr-choice-btn.right { border-color: transparent; color: #fff; background: linear-gradient(135deg, #059669, #10b981); }
+      padding: 12px 16px; border-radius: 16px; border: 2px solid rgba(99,102,241,.2);
-    .tr-choice-btn.wrongpick { border-color: transparent; color: #fff; background: linear-gradient(135deg, #dc2626, #ef4444); }
+      background: linear-gradient(180deg, #fff, #f6f7ff); color: var(--ink);
-    #tr-choice-next { display: block; margin: 0 auto 4px; }
+      box-shadow: var(--sh-1); transition: .15s var(--ease);
+    }
+    .tr-choice-btn:hover:not(:disabled) { border-color: var(--g1); transform: translateY(-2px); box-shadow: var(--sh-2); }
+    .tr-choice-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
+    .tr-choice-btn:disabled { cursor: default; box-shadow: none; opacity: .96; }
+    .tr-choice-btn.right { border-color: transparent; color: #fff; background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 14px 28px -10px rgba(16,185,129,.6); animation: trPop .45s var(--ease); }
+    .tr-choice-btn.wrongpick { border-color: transparent; color: #fff; background: linear-gradient(135deg, #dc2626, #ef4444); animation: trShake .4s var(--ease); }
+    .tr-choice-btn .katex { color: inherit; }
+    #tr-choice-next { display: block; margin: 14px auto 2px; min-width: 168px; justify-content: center; }
 
     /* строка ответа */
     .tr-inrow { display: flex; gap: 10px; align-items: stretch; max-width: 460px; margin: 0 auto; }
@@ -306,8 +314,11 @@
     .tr-solution h4 { margin: 0 0 14px; font-family: 'Manrope', sans-serif; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); font-weight: 800; }
     .tr-step { color: #334155; padding: 13px 0; }
     .tr-step + .tr-step { border-top: 1px dashed rgba(99,102,241,.2); }
-    .tr-step-note { display: block; color: var(--ink-soft); font-family: 'Manrope', sans-serif; font-size: .92rem; line-height: 1.6; margin-bottom: 7px; }
+    .tr-step-note { display: block; color: var(--ink-soft); font-family: 'Manrope', sans-serif; font-size: .92rem; line-height: 1.65; margin-bottom: 7px; }
+    /* инлайн-формулы в пояснении: соразмерны тексту, чуть подсвечены, не «прыгают» по базовой линии */
+    .tr-step-note .katex { font-size: 1.02em; color: var(--accent-ink); }
     .tr-step-math { display: block; font-family: 'Cambria Math', serif; font-size: 1.2rem; color: var(--ink); margin-left: 31px; }
+    .tr-step-math .katex { font-size: 1.05em; }
     .tr-step-n { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 50%; background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 800; margin-right: 9px; vertical-align: 1px; }
 
     /* ── итог сессии ── */
@@ -372,6 +383,11 @@
       .tr-progress-card .tr-stat-tiles { grid-template-columns: 1fr 1fr; }
       .tr-inrow { flex-wrap: wrap; }
       .tr-inrow .tr-btn { width: 100%; justify-content: center; }
+      .tr-choices { grid-template-columns: 1fr; gap: 9px; }
+      .tr-choice-btn { min-height: 52px; font-size: 1.12rem; }
+      #tr-choice-next { width: 100%; }
+      .tr-figure { max-width: 280px; }
+      .tr-step-math { margin-left: 0; }
     }
     @media (prefers-reduced-motion: reduce) {
       * { animation-duration: .001ms !important; transition-duration: .001ms !important; }