:root {
  color-scheme: light dark;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #dbe4ee;
  --surface: #f8fafc;
  --surface-raised: #ffffff;
  --accent: #2563eb;
  --terminal: #0f172a;
  --terminal-raised: #17233a;
  --terminal-line: #263651;
  --terminal-text: #cbd5e1;
  --success: #6ee7b7;
  --danger: #fca5a5;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: #e2e8f0;
  color: var(--ink);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

[hidden] {
  display: none !important;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.topbar {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 2rem;
  color: #cbd5e1;
  background: var(--terminal);
  border-bottom: 1px solid #1e293b;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand-mark {
  color: #f8fafc;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.back-link {
  color: #93c5fd;
  font-size: 0.82rem;
  text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
  color: #dbeafe;
  text-decoration: underline;
}

.prototype-label {
  color: #64748b;
  font: 0.68rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.12em;
}

.prototype-label span {
  margin: 0 0.45rem;
  color: #475569;
}

.workspace {
  display: grid;
  min-height: calc(100vh - 64px);
  flex: 1;
  grid-template-columns: minmax(320px, 0.88fr) minmax(440px, 1.12fr);
}

.problem-pane {
  overflow: auto;
  background: var(--surface);
}

.problem-content {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4.5rem) 2rem;
}

.mission-label,
.section-kicker,
.terminal-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mission-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.mission-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px #dbeafe;
}

h1 {
  max-width: 16ch;
  margin: 1.25rem 0 1rem;
  color: var(--ink);
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.objective {
  max-width: 42rem;
  margin: 0 0 2rem;
  color: #475569;
  font-size: 1.05rem;
  line-height: 1.8;
}

.expression-card,
.checkpoint-card,
.hint-panel,
.explanation-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}

.expression-card {
  padding: 1rem 1.15rem 1.2rem;
}

.expression-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.copy-expression-button {
  padding: 0.3rem 0.5rem;
  border: 1px solid #bfdbfe;
  border-radius: 5px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 0.72rem;
}

.copy-expression-button:hover,
.copy-expression-button:focus-visible {
  background: #dbeafe;
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.expression {
  display: block;
  margin-top: 0.65rem;
  color: #1e3a8a;
  font: 1.4rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.01em;
  /* 日本語混じりの displayExpression（「赤玉4個、白玉3個から2個同時に取り出す」）は
     区切りが無く、折り返さないと枠からはみ出して切れていた。 */
  overflow-wrap: anywhere;
}

.checkpoint-card {
  margin-top: 0.9rem;
  padding: 1rem 1.15rem;
}

.checkpoint-prompt {
  margin: 0.65rem 0 0;
  color: var(--ink);
  font: 1.02rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.hint-panel,
.explanation-panel {
  margin-top: 1.35rem;
  padding: 1rem 1.15rem;
}

.panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.panel-note {
  color: var(--muted);
  font-size: 0.72rem;
}

.hints-list {
  display: grid;
  gap: 0.55rem;
  margin: 0.85rem 0 0;
  padding-left: 1.25rem;
}

.hints-list details {
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: #f1f5f9;
}

.hints-list summary {
  color: #334155;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
}

.hints-list p,
.explanation-panel p:last-child {
  margin: 0.55rem 0 0;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.7;
}

.explanation-panel {
  border-color: #a7f3d0;
  background: #ecfdf5;
}

.explanation-panel .section-kicker {
  color: #047857;
}

.explanation-panel p:last-child {
  color: #065f46;
}

.ai-review-panel {
  border-color: #ddd6fe;
  background: #f5f3ff;
}

.ai-review-note {
  margin: 0.6rem 0 0.8rem;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.7;
}

.ai-review-prompt-text {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  overflow-x: auto;
  color: #4c1d95;
  background: #ffffff;
  font: 0.82rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-review-panel .copy-expression-button {
  margin-top: 0.7rem;
}

.problem-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  color: #94a3b8;
  font: 0.68rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.03em;
}

.terminal-pane {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  color: var(--terminal-text);
  background: var(--terminal);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.6rem 1.15rem;
  border-bottom: 1px solid var(--terminal-line);
}

.terminal-kicker {
  color: #64748b;
  font-size: 0.63rem;
}

.terminal-header h2 {
  margin: 0.35rem 0 0;
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.terminal-status {
  padding: 0.35rem 0.55rem;
  border: 1px solid #334155;
  border-radius: 5px;
  color: #94a3b8;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.terminal-status.checking {
  color: #fcd34d;
  border-color: #854d0e;
}

.terminal-status.retry {
  color: var(--danger);
  border-color: #7f1d1d;
}

.terminal-status.complete {
  color: var(--success);
  border-color: #065f46;
}

.terminal-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 1.2rem 1.6rem 1.4rem;
}

.terminal-log {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 0.2rem 0.1rem 1rem;
  scrollbar-color: #334155 var(--terminal);
}

.log-line {
  display: flex;
  gap: 0.8rem;
  margin: 0 0 0.85rem;
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.log-prefix {
  flex: 0 0 1.2rem;
  color: #64748b;
  text-align: right;
}

.system-line {
  color: #64748b;
}

.input-line {
  color: #f8fafc;
}

.input-line .log-prefix {
  color: #60a5fa;
}

.success-line {
  color: var(--success);
}

.success-line .log-prefix {
  color: var(--success);
}

.error-line {
  color: var(--danger);
}

.error-line .log-prefix {
  color: var(--danger);
}

.hint-line {
  color: #fcd34d;
  padding-left: 2rem;
  font-size: 0.84rem;
}

.hint-line .log-prefix {
  color: #f59e0b;
}

.answer-form {
  position: sticky;
  bottom: 0;
  padding: 1rem;
  border: 1px solid var(--terminal-line);
  border-radius: 10px;
  background: var(--terminal-raised);
}

.answer-form label {
  display: block;
  margin-bottom: 0.65rem;
  color: #94a3b8;
  font-size: 0.78rem;
}

.answer-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.input-prefix {
  color: #60a5fa;
  font-size: 1rem;
}

.answer-row input {
  min-width: 0;
  flex: 1;
  padding: 0.7rem 0;
  border: 0;
  outline: 0;
  color: #f8fafc;
  background: transparent;
  font: 1rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

.answer-row input::placeholder {
  color: #64748b;
}

.answer-row input:focus {
  box-shadow: 0 2px 0 #60a5fa;
}

.answer-row button {
  padding: 0.6rem 0.9rem;
  border: 1px solid #2563eb;
  border-radius: 6px;
  color: #eff6ff;
  background: #1d4ed8;
  font-size: 0.82rem;
}

.answer-row button:hover:not(:disabled),
.answer-row button:focus-visible {
  background: #2563eb;
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* 物理キーボードのある環境では要らないので、タッチ端末でだけ出す。 */
.keyboard-toggle {
  display: none;
  padding: 0.55rem 0.55rem;
  border: 1px solid var(--terminal-line);
  border-radius: 6px;
  color: #93c5fd;
  background: #1e293b;
  font-size: 1rem;
  line-height: 1;
}

.keyboard-toggle[aria-pressed="true"] {
  border-color: #2563eb;
  color: #eff6ff;
  background: #1d4ed8;
}

.auto-advance-button {
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #2563eb;
  border-radius: 6px;
  color: #eff6ff;
  background: #1d4ed8;
  font-size: 0.86rem;
}

.auto-advance-button:hover:not(:disabled),
.auto-advance-button:focus-visible {
  border: 1px solid #2563eb;
  background: #2563eb;
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.math-keypad {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.keypad-button {
  min-width: 44px;
  min-height: 44px;
  padding: 0.55rem 0.4rem;
  border: 1px solid var(--terminal-line);
  border-radius: 6px;
  color: var(--terminal-text);
  background: #1e293b;
  font: 1rem ui-monospace, SFMono-Regular, Consolas, monospace;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.keypad-button:hover:not(:disabled),
.keypad-button:focus-visible {
  border-color: #60a5fa;
  background: #334155;
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.keypad-button.keypad-action {
  color: #bfdbfe;
  background: #1e3a5f;
}

/* Unit-specific keys (i, ∞, vector brackets ...) sit below the base keypad. */
.math-keypad-extra {
  margin-top: 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--terminal-line);
}

.math-keypad-extra .keypad-button {
  color: #bfdbfe;
  background: #17304d;
  font-size: 0.95rem;
}

.keypad-button.keypad-clear {
  color: #fecaca;
  background: #4c1d2b;
  font-size: 0.8rem;
}

.keypad-button.keypad-span-2 {
  grid-column: span 2;
}

.answer-form.is-complete {
  border-color: #065f46;
}

.index-main {
  flex: 1;
  background: var(--surface);
}

.index-content {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3rem) 4rem;
}

.index-heading {
  max-width: 20ch;
  margin: 1.25rem 0 1rem;
  color: var(--ink);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.unit-section {
  margin-top: 2.75rem;
}

.unit-heading {
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 750;
  border-bottom: 1px solid var(--line);
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
}

.problem-card {
  position: relative;
  display: block;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  background: var(--surface-raised);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.problem-card:hover,
.problem-card:focus-visible {
  border-color: var(--accent);
  outline: 0;
  transform: translateY(-1px);
}

.problem-card.is-completed {
  border-color: #6ee7b7;
  background: #f0fdf9;
}

.problem-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.difficulty-badge {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.difficulty-badge.difficulty-standard {
  color: #92400e;
  background: #fef3c7;
}

.difficulty-badge.difficulty-advanced {
  color: #9f1239;
  background: #ffe4e6;
}

.completed-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  color: #047857;
  background: #d1fae5;
  font-size: 0.68rem;
  font-weight: 700;
}

.problem-card-title {
  margin: 0.85rem 0 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.5;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  color: var(--muted);
  background: #f1f5f9;
  font-size: 0.7rem;
}

.problem-card-level {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

/* --- Index: practice entry point and filters ---------------------------- */

.practice-cta {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
  padding: 1rem 1.15rem;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  color: inherit;
  background: #eff6ff;
  text-decoration: none;
}

.practice-cta:hover,
.practice-cta:focus-visible {
  border-color: var(--accent);
  outline: 0;
}

.practice-cta-label {
  color: #1d4ed8;
  font-size: 1rem;
  font-weight: 750;
}

.practice-cta-note {
  color: #475569;
  font-size: 0.84rem;
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}

.filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-legend {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.filter-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #334155;
  background: #f8fafc;
  font-size: 0.8rem;
  font-weight: 650;
}

.filter-chip:hover,
.filter-chip:focus-visible {
  border-color: var(--accent);
}

.filter-chip.is-active {
  border-color: var(--accent);
  color: #1d4ed8;
  background: #eff6ff;
}

.filter-chip-note {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 500;
}

.filter-chip.is-active .filter-chip-note {
  color: #3b82f6;
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #334155;
  font-size: 0.82rem;
}

.filter-count {
  color: var(--muted);
  font: 0.75rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

.filter-empty {
  margin: 1.75rem 0 0;
  padding: 1.15rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

/* --- Practice mode ------------------------------------------------------ */

.index-content-narrow {
  width: min(720px, 100%);
}

.practice-form {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 1.35rem 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}

.form-field {
  display: grid;
  gap: 0.45rem;
}

.form-field label {
  color: #334155;
  font-size: 0.85rem;
  font-weight: 700;
}

.form-field select {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #f8fafc;
  font: inherit;
}

.form-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.form-note,
.form-error {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  font-size: 0.85rem;
}

.form-note {
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  background: #eff6ff;
}

.form-error {
  border: 1px solid #fecaca;
  color: #9f1239;
  background: #fff1f2;
}

.primary-button,
.secondary-button {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}

.primary-button {
  border: 1px solid #1d4ed8;
  color: #eff6ff;
  background: #1d4ed8;
}

.primary-button:hover:not(:disabled),
.primary-button:focus-visible {
  background: #2563eb;
}

.secondary-button {
  border: 1px solid var(--line);
  color: #334155;
  background: var(--surface-raised);
}

.secondary-button:hover:not(:disabled),
.secondary-button:focus-visible {
  border-color: var(--accent);
  color: #1d4ed8;
}

.practice-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  padding: 0.7rem 2rem;
  color: #cbd5e1;
  background: var(--terminal-raised);
  border-bottom: 1px solid var(--terminal-line);
}

.practice-bar.is-solved {
  border-bottom-color: #065f46;
}

.practice-bar-info {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.practice-progress {
  color: #f8fafc;
  font: 0.9rem ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 700;
}

.practice-scope {
  color: #64748b;
  font-size: 0.76rem;
}

.practice-bar-timer {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.practice-timer-label {
  color: #64748b;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.practice-timer {
  color: #93c5fd;
  font: 1.1rem ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.practice-bar-actions {
  display: flex;
  gap: 0.5rem;
}

.practice-bar-actions .secondary-button {
  border-color: #334155;
  color: #cbd5e1;
  background: transparent;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
}

.practice-bar-actions .secondary-button:hover:not(:disabled),
.practice-bar-actions .secondary-button:focus-visible {
  border-color: #60a5fa;
  color: #dbeafe;
}

.practice-bar-actions .primary-button {
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
}

.practice-bar ~ .workspace {
  min-height: calc(100vh - 64px - 58px);
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.score-card {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}

.score-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.score-value {
  margin: 0.5rem 0 0;
  color: var(--ink);
  font: 1.9rem ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.score-note {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.result-list {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-raised);
}

.result-row.is-unsolved {
  background: #f8fafc;
}

.result-row-main {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.result-status {
  color: #047857;
  font-weight: 750;
}

.result-row.is-unsolved .result-status {
  color: var(--muted);
}

.result-title {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  text-decoration: none;
}

.result-title:hover,
.result-title:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.result-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}


/* =========================================================================
   数式の組版（MathML・v22）
   KaTeX / MathJax を入れずに、サーバーが吐いた MathML をブラウザにそのまま
   描かせている。したがってここでやることは大きさと色を整えるだけでよい。
   ========================================================================= */

math {
  font-size: 1.06em;
}

.expression-math {
  overflow-x: auto;
  padding-bottom: 0.25rem;
  font-family: inherit;
}

.expression-math math {
  color: #1e3a8a;
  font-size: 1.85rem;
}

/* 文中に埋まった数式は、行の高さを崩さない程度に留める。 */
.checkpoint-prompt math,
.objective math,
.hints-list math,
.explanation-panel math {
  font-size: 1.12em;
}

.problem-actions {
  margin-top: 1.35rem;
}

.solution-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.solution-link:hover,
.solution-link:focus-visible {
  border-color: #93c5fd;
  background: #eff6ff;
}

/* =========================================================================
   解答・解説ページ（v22）
   ========================================================================= */

.solution-content {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem) 4rem;
}

.solution-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.2rem;
}

.solution-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  font-size: 0.82rem;
  font-weight: 600;
}

.solution-tag-note {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 400;
}

.solution-answer {
  margin: 1.6rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
}

.solution-answer-value {
  margin: 0.4rem 0 0;
  color: #1e3a8a;
  font-size: 1.5rem;
}

.solution-answer-value math {
  font-size: 1.7rem;
}

.solution-reference {
  margin-top: 1.4rem;
}

.solution-steps {
  margin-top: 2.2rem;
}

.solution-step-list {
  margin: 0.9rem 0 0;
  padding-left: 1.4rem;
}

.solution-step {
  margin-bottom: 1.6rem;
  padding-left: 0.4rem;
}

.solution-step.is-note {
  /* auto-advance は「問いかけ」ではなく整理のステップなので、少し引く。 */
  opacity: 0.92;
}

.solution-step-prompt {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.75;
}

.solution-step-answer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.6rem 0 0;
  color: #1e3a8a;
  font-size: 1.1rem;
}

.solution-step-answer-label,
.solution-step-state-label {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.solution-step-explanation {
  margin: 0.6rem 0 0;
  color: #334155;
  line-height: 1.9;
}

.solution-step-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.7rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-raised);
  overflow-x: auto;
}

.solution-step-state math {
  font-size: 1.3rem;
  color: #1e3a8a;
}

.solution-step-hints {
  margin-top: 0.75rem;
  font-size: 0.92rem;
}

.solution-step-hints summary {
  color: var(--muted);
  cursor: pointer;
}

.solution-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2.5rem;
}

.solution-actions .primary-button,
.solution-actions .secondary-button {
  text-decoration: none;
}

/* 一覧のカード。タイトルのリンクがカード全体の当たり判定を持ち、
   「解答・解説」だけがその上に別のリンクとして乗る。 */
.problem-card-link {
  color: inherit;
  text-decoration: none;
}

.problem-card-link::after {
  position: absolute;
  content: "";
  inset: 0;
}

.problem-card-solution {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.problem-card-solution:hover,
.problem-card-solution:focus-visible {
  text-decoration: underline;
}

.problem-card:has(.problem-card-link:hover),
.problem-card:has(.problem-card-link:focus-visible) {
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* 物理キーボードの操作案内。狭い画面では意味がないので隠す。 */
.footer-keys {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .footer-keys {
    display: none;
  }
}

/* 広い画面ではキーパッドは常に開いていて、開閉ボタンは要らない。 */
#keypad-toggle {
  display: none;
}

@media (max-width: 860px) {
  #keypad-toggle {
    display: block;
  }
}

/* 押されている状態（キーパッドが開いている）を分かるようにする。 */
.answer-icon-button.is-active {
  border-color: #2563eb;
  color: #eff6ff;
  background: #1d4ed8;
}

/* 積分定数 C は変数ではなく定数。数学の組版どおり立体（イタリックにしない）
   にして、abc の c と取り違えないようにする。 */
.keypad-button.keypad-variable[data-key="C"],
.keypad-button.keypad-variable[data-key="="] {
  font-style: normal;
}

@media (max-width: 860px) {
  .topbar {
    padding: 0 1.25rem;
  }

  .practice-bar {
    padding: 0.7rem 1.25rem;
  }

  .practice-bar ~ .workspace {
    min-height: 0;
  }

  .prototype-label {
    display: none;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .problem-pane {
    min-height: auto;
  }

  .problem-content {
    padding-top: 2.5rem;
  }

  .terminal-pane {
    min-height: 520px;
  }
}

@media (max-width: 520px) {
  .problem-content,
  .terminal-header,
  .terminal-body {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .problem-footer {
    flex-direction: column;
    gap: 0.2rem;
  }

  .answer-form {
    padding: 0.8rem;
  }

  .answer-row button {
    padding-right: 0.7rem;
    padding-left: 0.7rem;
  }

  .expression-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
  }
}

/* =========================================================================
   狭い画面のレイアウト（v26）
   v22 では入力欄だけを画面下に固定していたが、ターミナルのログ（採点結果や
   ヒント）は問題文の下に流れたままで、実機だと「延々スクロールした先に
   ターミナルがある」状態だった。RouteLab と同じく
   「上：問題文（スクロール）／下：ターミナル（固定）」の 2 ペインにする。
   固定ペインの高さはキーパッドの開閉で変わるので、実測値を
   --terminal-pane-h に入れて問題文側の下余白へ反映する（problem_ui.js）。
   ========================================================================= */

@media (max-width: 860px) {
  .terminal-pane {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 0;
    max-height: 72vh;
    max-height: 72dvh;
    border-top: 1px solid var(--terminal-line);
    box-shadow: 0 -12px 28px rgb(15 23 42 / 45%);
  }

  /* 固定ペインの裏にページ末尾が隠れないよう、実測の高さぶん空ける。 */
  .workspace {
    padding-bottom: calc(var(--terminal-pane-h, 42vh) + 1rem);
  }

  /* ヘッダーは縦を食うだけなので 1 行に潰す。 */
  .terminal-header {
    padding: 0.5rem 1.25rem;
  }

  .terminal-header h2 {
    display: none;
  }

  .terminal-kicker {
    font-size: 0.6rem;
  }

  .terminal-body {
    padding: 0.7rem 1.25rem;
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  }

  /* 既定でだいたい画面下 4 割。キーパッドを開くとログ側が縮んで場所を譲る。 */
  .terminal-log {
    min-height: 3.2rem;
    max-height: 20vh;
    max-height: 20dvh;
    flex: 1 1 auto;
    padding-bottom: 0.5rem;
  }

  .answer-form {
    position: static;
    flex: 0 0 auto;
    padding: 0.7rem;
  }

  .answer-form label {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 0.45rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .math-keypad {
    margin-top: 0.6rem;
    gap: 0.35rem;
  }

  .keypad-button {
    min-height: 40px;
    padding: 0.4rem 0.3rem;
    font-size: 0.95rem;
  }

  /* 既定は開いた状態。たたむと .keypad-collapsed が付く。 */
  .answer-form.keypad-collapsed .math-keypad,
  .answer-form.keypad-collapsed .math-keypad-extra {
    display: none;
  }
}

@media (max-width: 520px) {
  /* 360px 幅でも 5 列が横にはみ出さないようにする。 */
  .math-keypad {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .keypad-button {
    min-width: 0;
  }

  .terminal-header,
  .terminal-body {
    padding-right: 0.9rem;
    padding-left: 0.9rem;
  }
}

/* iPad の横向きなど、幅は広いがタッチで操作する端末でも OS キーボードの
   抑止は効かせたいので、⌨ の切り替えボタンはポインタ種別で出す。 */
@media (pointer: coarse) {
  .keyboard-toggle {
    display: block;
  }
}

/* =========================================================================
   キーパッドの色分け（v26）
   掛ける「×」と文字の「x」が並ぶと紛らわしいので、数字・演算子・文字で
   色と字体を変える。文字キーは数式らしく明朝体のイタリックにしてあり、
   直立した記号の演算子とは形からして違って見える。
   ========================================================================= */

.keypad-button.keypad-operator {
  border-color: #78551a;
  color: #fbbf24;
  background: #362610;
  font-weight: 650;
}

.keypad-button.keypad-variable {
  border-color: #1f6b5c;
  color: #5eead4;
  background: #0e3b34;
  font-family: "Times New Roman", "Hiragino Mincho ProN", serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 600;
}

/* 文字キーは「いつも同じ列」に出す。問題ごとに幅や位置が動くと押す場所を
   覚えられないので、数字キーと同じ 5 列グリッドに素直に並べる。 */
.keypad-button.keypad-variable.is-unused {
  border-color: #24303f;
  color: #4a7d75;
  background: #0c221f;
}

.keypad-button.keypad-span-3 {
  grid-column: span 3;
}

/* キーパッドは複数の行グループを積むので、間隔は狭めに詰める。 */
.math-keypad + .math-keypad {
  margin-top: 0.4rem;
}

/* 単元別キーは「この問題だけの行」なので、定位置の行との間に区切りを入れる。 */
.math-keypad-extra {
  margin-bottom: 0.15rem;
  padding-top: 0;
  padding-bottom: 0.55rem;
  border-top: 0;
  border-bottom: 1px dashed var(--terminal-line);
}

/* 全画面表示。ページ遷移ではないので進捗はそのまま残る。 */
.solution-overlay.is-expanded {
  border-right: 0;
}

/* =========================================================================
   解答・解説のオーバーレイ（v26）
   問題エリアの上にだけ重ね、ターミナル（入力欄・キーパッド）は覆わない。
   モーダルではないので、解説を開いたまま写経できる。
   ========================================================================= */

.solution-overlay {
  position: fixed;
  z-index: 30;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--terminal-line);
  background: var(--surface);
  box-shadow: 0 16px 44px rgb(15 23 42 / 38%);
}

.solution-overlay-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.1rem;
  color: #f8fafc;
  background: var(--terminal);
}

.solution-overlay-title {
  margin: 0;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.solution-overlay-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.solution-overlay-link {
  color: #93c5fd;
  font-size: 0.76rem;
  text-decoration: none;
}

.solution-overlay-link:hover,
.solution-overlay-link:focus-visible {
  text-decoration: underline;
}

.solution-overlay-close {
  padding: 0.4rem 0.7rem;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  background: #1e293b;
  font-size: 0.78rem;
}

.solution-overlay-close:hover,
.solution-overlay-close:focus-visible {
  border-color: #60a5fa;
  background: #334155;
}

.solution-overlay-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-top: 1.4rem;
  padding-bottom: 2.5rem;
  -webkit-overflow-scrolling: touch;
}

.solution-overlay-note {
  color: #64748b;
  font-size: 0.85rem;
}

/* =========================================================================
   手書きメモ（v26）
   ========================================================================= */

.terminal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.memo-toggle {
  padding: 0.35rem 0.6rem;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #cbd5e1;
  background: #1e293b;
  font-size: 0.72rem;
  white-space: nowrap;
}

.memo-toggle:hover,
.memo-toggle:focus-visible {
  border-color: #60a5fa;
  color: #eff6ff;
}

.memo-toggle.is-active {
  border-color: #2563eb;
  color: #eff6ff;
  background: #1d4ed8;
}

.memo-panel {
  position: fixed;
  z-index: 40;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--terminal-line);
  border-radius: 10px;
  background: var(--terminal-raised);
  box-shadow: 0 18px 44px rgb(15 23 42 / 50%);
}

.memo-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--terminal-line);
  background: var(--terminal);
  cursor: move;
  touch-action: none;
  user-select: none;
}

.memo-grip {
  color: #475569;
  font-size: 0.8rem;
  letter-spacing: -0.15em;
}

.memo-title {
  margin-right: auto;
  color: #94a3b8;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.memo-tools {
  display: flex;
  gap: 0.3rem;
}

.memo-tool {
  padding: 0.3rem 0.45rem;
  border: 1px solid #334155;
  border-radius: 5px;
  color: #cbd5e1;
  background: #1e293b;
  font-size: 0.7rem;
  white-space: nowrap;
}

.memo-tool.is-active {
  border-color: #2563eb;
  color: #eff6ff;
  background: #1d4ed8;
}

.memo-tool.memo-close {
  color: #fecaca;
  background: #4c1d2b;
}

.memo-canvas {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  background: #0b1220;
  cursor: crosshair;
  touch-action: none;
}

.memo-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  border-right: 2px solid #475569;
  border-bottom: 2px solid #475569;
  border-bottom-right-radius: 9px;
  cursor: nwse-resize;
  touch-action: none;
}

/* キャレット（入力位置）が見えないと ← → もタップでの移動も何が起きたか
   分からないので、はっきりした色を付けておく。 */
.answer-row input {
  caret-color: #60a5fa;
}

/* =========================================================================
   画面の言葉づかいと送信ボタンの位置（v27）
   ========================================================================= */

/* 読み上げ用にだけ残すラベル。設問はログ側に出すので画面には重ねない。 */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.terminal-heading {
  margin: 0;
  color: #e2e8f0;
  font-size: 0.9rem;
  font-weight: 650;
}

/* 送信は右上ではなく、⌫・消去と並べて最下段の右に置く。 */
.keypad-button.keypad-submit {
  border-color: #2563eb;
  color: #eff6ff;
  background: #1d4ed8;
  font-size: 0.9rem;
  font-weight: 650;
}

.keypad-button.keypad-submit:hover:not(:disabled),
.keypad-button.keypad-submit:focus-visible {
  background: #2563eb;
}

.math-keypad-actions {
  margin-top: 0.5rem;
}

@media (max-width: 860px) {
  /* 見出しは畳むので、操作ボタンだけを右に寄せる。 */
  .terminal-header {
    justify-content: flex-end;
  }
}

/* =========================================================================
   入力の形の案内・減点方式の採点・狭い画面の重複整理（v28）
   ========================================================================= */

/* 「どんな形で入力するのか」の案内。設問とは区別が付くよう色を変える。 */
.log-line.note-line {
  color: #7dd3fc;
}

.log-line.note-line .log-prefix {
  color: #38bdf8;
}

/* いまの点数。100点から、まちがえとヒントぶんを引いた数。 */
.score-chip {
  padding: 0.3rem 0.5rem;
  border: 1px solid #1f6b5c;
  border-radius: 6px;
  color: #5eead4;
  background: #0e3b34;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.score-chip.is-low {
  border-color: #7c4a1a;
  color: #fbbf24;
  background: #362610;
}

/* 一覧側の点数バッジ。低いものが復習の優先候補。 */
/* 計算ドリルであることの印（v50）。式を処理するだけの反復と、場面のある問題を見分ける。 */
.kind-badge {
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.68rem;
}

.score-badge {
  padding: 0.15rem 0.4rem;
  border: 1px solid #1f6b5c;
  border-radius: 5px;
  color: #0f766e;
  background: #ecfdf5;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.score-badge.is-low {
  border-color: #d19a3d;
  color: #92400e;
  background: #fffbeb;
}

/* 狭い画面では、設問はターミナルのログに出る。同じ文を問題文カードにも
   出すと画面の半分が同じ文字で埋まるので、カード側は畳む。 */
@media (max-width: 860px) {
  .checkpoint-card {
    display: none;
  }

  /* 中身（キー操作の案内）は狭い画面では隠しているので、枠ごと消す。 */
  .problem-footer {
    display: none;
  }
}

/* 式が何なのか（f(x) / f''(x) / F(x)）を式の手前に出す。微分を進めた先で
   「6x-12」とだけ出ていても、何の式か分からないため。 */
/* 積み上がった式のうち、前の段階のものは少し引く（最新が読み取れるように・v42）。 */
/* 静的版の一覧で、解き終わった問題を控えめにする（v66）。 */
.solve-list-item.is-completed {
  opacity: 0.55;
}

.expression-row.is-earlier {
  opacity: 0.62;
}

.expression-row + .expression-row {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--line);
}

.expression-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.expression-label {
  color: #5eead4;
  font-family: "Times New Roman", "Hiragino Mincho ProN", serif;
  font-size: 1.15rem;
  font-style: italic;
  white-space: nowrap;
}

.expression-row .expression {
  margin: 0;
}

/* 出した値のメモ（v55）。名前が日本語の一文になるので、式より控えめに置く。 */
.expression-row.is-memo {
  align-items: baseline;
  gap: 0.4rem;
}

.expression-row.is-memo .expression-label {
  flex: 1 1 8rem;
  min-width: 0;
  color: #94a3b8;
  font-family: inherit;
  font-size: 0.82rem;
  font-style: normal;
  white-space: normal;
}

.expression-row.is-memo .expression {
  flex: 0 0 auto;
  font-size: 1.05rem;
  font-weight: 600;
}

/* 入力欄の右に並ぶ小さなボタン（↑ 履歴の呼び出し、⌨ キーボード切り替え）。 */
.answer-icon-button {
  padding: 0.55rem 0.55rem;
  border: 1px solid var(--terminal-line);
  border-radius: 6px;
  color: #93c5fd;
  background: #1e293b;
  font-size: 1rem;
  line-height: 1;
}

.answer-icon-button:hover:not(:disabled),
.answer-icon-button:focus-visible {
  border-color: #60a5fa;
  color: #eff6ff;
}

/* 式の名前（f(x) など）は本文と同じ濃さで。緑は背景が明るいぶん読みにくい。 */
.expression-label {
  color: var(--ink);
}

/* 送信の左。押すと入力中の式を計算して整理する。 */
.keypad-button.keypad-reveal {
  border-color: #4c1d95;
  color: #c4b5fd;
  background: #2a1f45;
  font-size: 0.78rem;
}

.keypad-tidy {
  border-color: #78551a;
  color: #fbbf24;
  background: #362610;
  font-size: 0.78rem;
}

.keypad-button.keypad-tidy:hover:not(:disabled),
.keypad-button.keypad-tidy:focus-visible {
  background: #4a3414;
}

/* 割り算のキー。÷ は小学校の記号で、数学の答案では分数になる（画面の式も
   分数に組版される）。それが分かる見た目にしておく。 */
.keypad-button.keypad-fraction {
  font-size: 0.82rem;
  letter-spacing: -0.02em;
}

/* 式では答えられない段階の選択肢。入力欄とキーパッドの代わりに出る。 */
.choice-panel {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.choice-button {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--terminal-line);
  border-radius: 8px;
  color: var(--terminal-text);
  background: #1e293b;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
}

.choice-button:hover:not(:disabled),
.choice-button:focus-visible {
  border-color: #60a5fa;
  color: #f8fafc;
  background: #334155;
}

/* =========================================================================
   電卓（メモとは別のパネル）と、解き終わったときの結果表示（v29）
   ========================================================================= */

.calc-panel {
  padding-bottom: 0.5rem;
}

.calc-form {
  flex: 0 0 auto;
  padding: 0.5rem;
}

.calc-input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--terminal-line);
  border-radius: 6px;
  color: #f8fafc;
  background: #0b1220;
  font: 1rem ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: right;
  caret-color: #60a5fa;
}

.calc-result {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0.6rem 0.5rem;
  color: #5eead4;
  font: 0.85rem ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: right;
  overflow-wrap: anywhere;
}

.calc-result.is-error {
  color: #fca5a5;
}

.calc-keypad {
  flex: 1 1 auto;
  align-content: start;
  margin: 0;
  padding: 0 0.5rem;
  gap: 0.35rem;
}

/* 解けたときの表示。演出は入れないが、結果は言い切る。 */
.result-card {
  margin-bottom: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid #14532d;
  border-radius: 10px;
  background: #052e1b;
}

.result-heading {
  margin: 0;
  color: #86efac;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.result-score {
  margin: 0.35rem 0 0;
  color: #f0fdf4;
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.result-score.is-low {
  color: #fde68a;
}

.result-breakdown {
  margin: 0.3rem 0 0;
  color: #a7f3d0;
  font-size: 0.78rem;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.result-action {
  padding: 0.45rem 0.7rem;
  border: 1px solid #166534;
  border-radius: 6px;
  color: #dcfce7;
  background: #064e3b;
  font-size: 0.78rem;
  text-decoration: none;
}

.result-action:hover,
.result-action:focus-visible {
  border-color: #22c55e;
  background: #065f46;
}

/* 「次の問題へ」。いちばん押してほしいので、同じ部品のまま縁だけ明るくする。 */
.result-action-primary {
  border-color: #22c55e;
  color: #f0fdf4;
  font-weight: 600;
}

/* 画面確認ページ。問題カードを流用している。 */
.preview-step {
  color: #64748b;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.preview-source {
  margin: 0.4rem 0 0;
  color: #64748b;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

/* 式から起こしたグラフ。手で座標を書いた図（visual）が無い問題に添える。 */
.figure-card {
  margin-bottom: 0.9rem;
}

.plot-figure {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.6rem;
}

.plot-axis {
  stroke: #94a3b8;
  stroke-width: 1;
}

.plot-curve {
  fill: none;
  stroke: #2563eb;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 式が進んだあとの図（v39）。もとの曲線を薄く残し、新しい式を濃く描く。 */
/* 2本目の曲線（v43）。どちらがどれか分かるよう、色と名前で見分ける。 */
.plot-curve-other {
  stroke: #7c3aed;
}

.plot-curve-label {
  fill: #2563eb;
  font-size: 11px;
  font-weight: 600;
}

.plot-curve-other-label {
  fill: #7c3aed;
  font-size: 11px;
  font-weight: 600;
}

.plot-curve-faded {
  stroke: #cbd5e1;
  stroke-width: 2;
}

.plot-curve-next {
  stroke: #2563eb;
}

.plot-area {
  fill: rgb(37 99 235 / 18%);
  stroke: none;
}

.plot-bound {
  stroke: #2563eb;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* 段階ごとの重ね描き（v37）。2点を結ぶ直線と接線は、色で見分けられるようにする。 */
.plot-chord {
  stroke: #f97316;
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.plot-tangent {
  stroke: #f97316;
  stroke-width: 2;
}

.plot-mark {
  fill: #f97316;
}

.plot-guide {
  stroke: #cbd5e1;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.plot-label {
  fill: #64748b;
  font-size: 12px;
}

.plot-label-mark {
  fill: #ea580c;
  font-size: 12px;
  font-weight: 600;
  /* 曲線や接線と重なっても読めるように、文字のまわりを白で縁取る。 */
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linejoin: round;
}

.plot-label-center {
  text-anchor: middle;
}

.plot-label-right {
  text-anchor: end;
}

/* 目盛り（v40）。軸の線しか無く、縦横で桁が違っても読み取れなかった。 */
.plot-tick {
  stroke: #94a3b8;
  stroke-width: 1;
}

.plot-tick-label {
  /* 目盛りは読めてこそ意味がある。薄すぎたので濃くして少し大きくした（v42）。 */
  fill: #475569;
  font-size: 11px;
}

/* 目盛りの補助線。数字だけだと縦位置を目で追えない。 */
.plot-grid {
  stroke: #e2e8f0;
  stroke-width: 1;
}

/* ベクトルの図（v45）。いま出した1本だけを橙で強調する。 */
.plot-vector {
  stroke: #2563eb;
  stroke-width: 2.6;
  stroke-linecap: round;
}

.plot-vector-head {
  fill: #2563eb;
}

.plot-vector-label {
  fill: #1e3a8a;
  font-size: 12px;
  font-weight: 700;
}

/* 前の段階で出したベクトル。消さずに薄く残して、つながりが見えるようにする（v47）。 */
/* 原点からの距離を表す円（v51）。複素数の絶対値を図で言うために使う。 */
.plot-circle {
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}

.plot-circle-accent {
  fill: none;
  stroke: #fdba74;
  stroke-width: 1.8;
  stroke-dasharray: 5 4;
}

/* その段階で新しく分かった曲線（v53）。もとの曲線より前に出す。 */
.plot-curve-accent {
  stroke: #ea580c;
  stroke-width: 2.4;
}

.plot-curve-accent-label {
  fill: #c2410c;
  font-weight: 600;
}

/* 玉の図（v55）。確率の問題で袋の中身をそのまま描く。 */
.plot-ball-picked {
  fill: none;
  stroke: #ea580c;
  stroke-width: 2.4;
  stroke-dasharray: 4 3;
}

.plot-ball-label {
  fill: #475569;
  font-size: 12px;
}

.plot-ball-bag {
  fill: #1e293b;
  font-weight: 600;
}

/* 数列の図（v56）。点が項、棒の面積の合計が和。 */
.plot-seq-dot {
  fill: #2563eb;
  stroke: #ffffff;
  stroke-width: 1.4;
}

.plot-seq-dot-faded {
  fill: #cbd5e1;
  stroke: #ffffff;
  stroke-width: 1.4;
}

.plot-seq-label {
  fill: #1e3a8a;
  font-size: 12px;
  font-weight: 700;
}

.plot-seq-label-faded {
  fill: #94a3b8;
  font-size: 12px;
  font-weight: 600;
}

.plot-seq-bar {
  fill: #bfdbfe;
  stroke: #93c5fd;
  stroke-width: 1;
}

.plot-seq-trapezoid {
  fill: none;
  stroke: #ea580c;
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

/* 定義域の帯（v67）。「この範囲だけを見る」を示す。 */
/* 類題のしるし（v68）。計算ドリルとは色を分ける。 */
.kind-badge-variant {
  background: #ede9fe;
  color: #5b21b6;
}

.plot-band {
  fill: #fef3c7;
  opacity: 0.7;
}

.plot-band-edge {
  stroke: #f59e0b;
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}

.plot-band-label {
  fill: #b45309;
  font-weight: 600;
}

.plot-arc {
  fill: none;
  stroke: #f97316;
  stroke-width: 1.6;
}

.plot-arc-label {
  fill: #c2410c;
  font-weight: 600;
}

.plot-vector-muted {
  stroke: #a5b4fc;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.plot-vector-muted-head {
  fill: #a5b4fc;
}

.plot-vector-muted-label {
  fill: #818cf8;
  font-size: 11px;
  font-weight: 600;
}

/* 組み立ての途中（2a や -3b）を示す補助の矢印。 */
.plot-vector-dashed {
  stroke-dasharray: 6 4;
}

.plot-vector-accent {
  stroke: #ea580c;
  stroke-width: 3;
  stroke-linecap: round;
}

.plot-vector-accent-head {
  fill: #ea580c;
}

.plot-vector-accent-label {
  fill: #c2410c;
  font-size: 12px;
  font-weight: 700;
}

.plot-normal {
  stroke: #16a34a;
  stroke-width: 2.2;
}

.plot-line-faded {
  stroke: #fdba74;
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}

/* 期待値の図（v80）。幅＝確率・高さ＝金額の面積で、ならした高さが期待値。 */
.plot-expect-value {
  fill: #1e293b;
  font-size: 12px;
  font-weight: 700;
}

.plot-expect-share {
  fill: #64748b;
  font-size: 11px;
}

.plot-expect-level {
  stroke: #ea580c;
  stroke-width: 2.4;
  stroke-dasharray: 7 4;
}

/* ならしたあとの長方形。面積（金額×確率の合計）は3本のときと同じ。 */
.plot-expect-level-area {
  fill: rgb(234 88 12 / 12%);
  stroke: none;
}

.plot-expect-level-label {
  fill: #c2410c;
  font-size: 13px;
  font-weight: 700;
  /* 棒の上に重なるので、まわりを白で縁取って読めるようにする。 */
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3.5;
  stroke-linejoin: round;
}

/* 続けて2個取り出す組の表（v79）。条件付き確率を「行だけを見る」で見せる。 */
.plot-pair-cell {
  fill: #ffffff;
  stroke: #cbd5e1;
  stroke-width: 1;
}

.plot-pair-cell-hit {
  fill: #fed7aa;
  stroke: #ea580c;
  stroke-width: 1.6;
}

/* 条件の外。消さずに薄く残す —— 「見ないことにした」のが分かるように。 */
/* 条件から外れたマス。薄すぎると「変わっていない」に見えるので、はっきり灰色にする
   （本人の指摘: 「最後の1/3の方は図になってない」—— 実際には出ていたが、見分けが
   つかなかった）。 */
.plot-pair-cell-out {
  fill: #dde3ea;
  stroke: #ccd5df;
  stroke-width: 1;
}

/* 条件が付いたあとの「新しい全体」。ここが分母になる。 */
.plot-pair-frame {
  fill: none;
  stroke: #1d4ed8;
  stroke-width: 3;
  stroke-linejoin: round;
}

/* 同じ玉は2回引けないので、この組は存在しない。 */
.plot-pair-void {
  fill: #e2e8f0;
  stroke: #cbd5e1;
  stroke-width: 1;
}

/* さいころ2個の表（v74）。数え上げを、表の上の場所として見せる。 */
.plot-dice-cell {
  fill: #ffffff;
  stroke: #cbd5e1;
  stroke-width: 1;
}

.plot-dice-cell-dim {
  fill: #f8fafc;
  stroke: #e2e8f0;
  stroke-width: 1;
}

.plot-dice-cell-hit {
  fill: #fed7aa;
  stroke: #ea580c;
  stroke-width: 1.6;
}

/* さいころの目（v76）。数字を読み替えずに、目そのものを見て表を辿れるようにする。 */
.plot-die {
  fill: #ffffff;
  stroke: #64748b;
  stroke-width: 1.4;
}

.plot-die-pip {
  fill: #334155;
}

.plot-die-hit {
  fill: #fed7aa;
  stroke: #ea580c;
  stroke-width: 2;
}

.plot-die-pip-hit {
  fill: #9a3412;
}

.plot-die-dim {
  fill: #f8fafc;
  stroke: #e2e8f0;
  stroke-width: 1.2;
}

.plot-die-pip-dim {
  fill: #cbd5e1;
}

.plot-dice-axis {
  fill: #64748b;
  font-size: 11px;
}

/* 樹形図（v74）。反復試行の C(n,k) は、道すじの本数そのもの。 */
.plot-tree-edge {
  stroke: #cbd5e1;
  stroke-width: 1.4;
}

.plot-tree-edge-hit {
  stroke: #ea580c;
  stroke-width: 2.4;
}

.plot-tree-label {
  fill: #64748b;
  font-size: 11px;
}

.plot-tree-leaf {
  fill: #cbd5e1;
}

.plot-tree-leaf-hit {
  fill: #ea580c;
}

.plot-tree-leaf-label {
  fill: #94a3b8;
  font-size: 11px;
}

/* 割合の帯（v77・v79で表にも使う）。塗った高さ／目盛りの数が、そのまま答えの分数になる。 */
.plot-ratio-bar {
  fill: #f1f5f9;
  stroke: #e2e8f0;
  stroke-width: 1;
}

.plot-ratio-bar-hit {
  fill: #fed7aa;
  stroke: #ea580c;
  stroke-width: 1.4;
}

/* 目盛り。27個の道すじを描かずに、27等分のうち何個ぶんかを数えられるようにする。 */
.plot-ratio-tick {
  stroke: #94a3b8;
  stroke-width: 0.8;
}

.plot-tree-leaf-label-hit {
  fill: #c2410c;
  font-size: 11px;
  font-weight: 700;
}

/* 三角形の図（v74）。三角比は「どの辺がどの角の向かいか」が全部なので、形で見せる。 */
.plot-triangle {
  fill: none;
  stroke: #2563eb;
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.plot-triangle-area {
  fill: rgb(37 99 235 / 14%);
  stroke: none;
}

/* 底辺に下ろした高さ（v81）。面積 = (1/2)×底辺×高さ を図で言うために引く。 */
.plot-triangle-height {
  stroke: #ea580c;
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.plot-triangle-side-accent {
  stroke: #ea580c;
  stroke-width: 3.4;
  stroke-linecap: round;
}

.plot-triangle-arc {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 1.6;
}

.plot-triangle-arc-accent {
  fill: none;
  stroke: #ea580c;
  stroke-width: 2.2;
}

.plot-triangle-vertex {
  fill: #1e293b;
  font-size: 13px;
  font-weight: 700;
}

/* 辺と角の名前は線に重なるので、白い縁取りを別の文字として先に敷く（v81）。
   `paint-order` に頼ると、効かない環境で白い縁が文字の上に乗って読めなくなる。 */
.plot-label-halo {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 3.5;
  stroke-linejoin: round;
  font-size: 12px;
  font-weight: 700;
}

.plot-triangle-label {
  fill: #334155;
  font-size: 12px;
  font-weight: 600;
}

.plot-triangle-label-accent {
  fill: #c2410c;
  font-size: 12px;
  font-weight: 700;
}

.figure-note {
  margin: 0.4rem 0 0;
  color: #94a3b8;
  font-size: 0.7rem;
}

/* --- 課程カード（トップページ・v50）---------------------------------------
   教科だけだと数学の中で数I〜数IIIが混ざり、単元一覧まで降りないと飛べなかった。
   ------------------------------------------------------------------------- */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  margin: 0.4rem 0 1.6rem;
}

.course-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.course-card:hover,
.course-card:focus-visible {
  border-color: #93c5fd;
  background: #eff6ff;
}

.course-card-name {
  font-size: 1.05rem;
  font-weight: 700;
}

.course-card-count strong {
  font-size: 1.15rem;
}

.course-card-mix,
.course-card-units {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.7;
}

/* --- 教科カード（トップページ） -------------------------------------------
   AGENTS.md v26 で単元一覧の前に教科を選ぶ段を足した。カード自体は
   .problem-card と同じ見た目の系統に寄せてある。 */

.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.subject-card {
  display: block;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
  color: inherit;
  text-decoration: none;
}

.subject-card:hover,
.subject-card:focus-visible {
  border-color: var(--accent);
  outline: 0;
}

.subject-card-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 750;
}

.subject-card-note {
  margin: 0.35rem 0 0.9rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.subject-card-count {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
}

.subject-card-count strong {
  font-size: 1.15rem;
}

.subject-card-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subject-card-tiers li {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 0.68rem;
  font-weight: 700;
}

.subject-card-tiers li.difficulty-standard {
  color: #92400e;
  background: #fef3c7;
}

.subject-card-tiers li.difficulty-advanced {
  color: #9f1239;
  background: #ffe4e6;
}

/* --- 解法暗記モード（チャート式） -----------------------------------------
   打って解くモードの受け皿。1枚ずつめくって自己採点する。 */

.recall-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0.75rem;
}

.recall-filter .filter-chip {
  text-decoration: none;
}

.recall-progress {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.recall-card {
  padding: 1.35rem 1.4rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-raised);
}

.recall-card-unit {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.recall-card-status {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.72rem;
}

.recall-card-title {
  margin: 0.6rem 0 0.4rem;
  font-size: 1.1rem;
  line-height: 1.5;
}

.recall-card-expression {
  margin: 0.5rem 0 0.75rem;
  font-size: 1.05rem;
  overflow-x: auto;
}

.recall-card-objective {
  margin: 0 0 1.1rem;
  line-height: 1.75;
}

.recall-reveal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.recall-approach {
  margin-bottom: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
}

.recall-approach-text {
  margin: 0.3rem 0 0;
  line-height: 1.8;
}

.recall-solution {
  margin-bottom: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.recall-solution-loading {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.recall-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.recall-grade-button {
  padding: 0.7rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-raised);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.recall-grade-button.is-good {
  border-color: #a7f3d0;
  color: #047857;
  background: #ecfdf5;
}

.recall-grade-button.is-shaky {
  border-color: #fde68a;
  color: #92400e;
  background: #fffbeb;
}

.recall-grade-button.is-bad {
  border-color: #fecaca;
  color: #9f1239;
  background: #fef2f2;
}

.recall-grade-button:hover,
.recall-grade-button:focus-visible {
  outline: 0;
  filter: brightness(0.97);
}

.recall-summary {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-raised);
}

.recall-summary-text {
  margin: 0.4rem 0 1rem;
  line-height: 1.8;
}

/* 段階ごとに思い出す（v27の作り直し）。1問=1カードのまま、中を1段階ずつ開く。 */

.recall-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 1rem 0 0.75rem;
}

.recall-toolbar .recall-progress {
  margin: 0;
}

.recall-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recall-step {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.recall-step-count {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.recall-step-note {
  margin-left: 0.35rem;
  font-weight: 400;
}

.recall-step-prompt {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.85;
}

.recall-step-ask {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.recall-step-answer {
  margin-bottom: 0.85rem;
  padding: 0.8rem 1rem;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
}

.recall-step-answer-value {
  margin: 0.25rem 0 0;
  font-size: 1.2rem;
}

.recall-step-explain {
  margin-bottom: 0.85rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.recall-step-explanation {
  margin: 0;
  line-height: 1.85;
}

.recall-step-explain .hints-list {
  margin: 0.6rem 0 0;
}

.recall-step-state {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.recall-step-next {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.recall-done {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.recall-done-text {
  margin: 0.35rem 0 1rem;
  line-height: 1.8;
}

/* --- 聞くモード（v28） --------------------------------------------------- */

.listen-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
  margin: 1.25rem 0;
}

.listen-mode {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.listen-mode.is-active {
  border-color: var(--accent);
  background: #eff6ff;
}

.listen-mode-label {
  font-weight: 750;
}

.listen-mode-note {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.listen-player {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-raised);
}

.listen-now {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
}

.listen-now-index {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.listen-now-title {
  font-size: 1.02rem;
  font-weight: 700;
}

#listen-audio {
  width: 100%;
}

.listen-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 0.8rem 0 0.4rem;
}

.listen-segments {
  max-height: 22rem;
  margin: 0.8rem 0 0;
  padding: 0.6rem 0 0;
  border-top: 1px solid var(--line);
  overflow-y: auto;
  list-style: none;
}

.listen-segment {
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  cursor: pointer;
}

.listen-segment.is-muted {
  opacity: 0.35;
}

.listen-segment.is-current {
  background: #eff6ff;
}

.listen-segment-label {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.listen-segment-text {
  display: block;
  line-height: 1.7;
}

.listen-tracklist {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.listen-track-list {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
}

.listen-track {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.listen-track.is-current {
  color: var(--ink);
  font-weight: 750;
}

/* =========================================================================
   「解き方をたどる」モード（v31 で方針の4択、v33 で次の一手まで）。
   計算はせず、選ぶ段階だけを続けて出す。ボタンは問題ページのものと違い、
   明るい面（カードと同じ地）に置く。
   ========================================================================= */

/* 答え終わった段階は消さずに残るので、段落どうしを線で仕切って筋道に見せる。 */
.approach-step + .approach-step {
  margin-top: 0.4rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--line);
}

.approach-reveal {
  margin: 0.2rem 0 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.approach-choices {
  display: grid;
  gap: 0.55rem;
  margin: 0.2rem 0 1rem;
}

.approach-choice {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  line-height: 1.7;
  text-align: left;
  cursor: pointer;
}

.approach-choice:hover:not(:disabled),
.approach-choice:focus-visible {
  border-color: #93c5fd;
  background: #eff6ff;
}

.approach-choice:disabled {
  cursor: default;
}

.approach-choice.is-right {
  border-color: #a7f3d0;
  background: #ecfdf5;
  font-weight: 650;
}

.approach-choice.is-wrong {
  border-color: #fecaca;
  background: #fef2f2;
}

.approach-verdict {
  margin-bottom: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  line-height: 1.85;
}

.approach-verdict-heading {
  margin: 0 0 0.4rem;
  font-weight: 750;
}

.approach-verdict.is-right .approach-verdict-heading {
  color: #047857;
}

.approach-verdict.is-wrong .approach-verdict-heading {
  color: #9f1239;
}

.approach-verdict-text {
  margin: 0;
}

.approach-links {
  margin: 0;
  font-size: 0.85rem;
}

/* 広い画面では左（問題・図）と右（解答）を別々にスクロールさせる。
   ページ全体が伸びる作りだと、右の解答欄を送ったときに左の図まで一緒に流れてしまった
   （本人の指摘・v52:「解答を書くところをスクロールしたら左のところもスクロールされちゃう」）。
   狭い画面では上下に積むので、これまでどおりページごとスクロールする。 */
@media (min-width: 861px) {
  .app-shell {
    height: 100vh;
  }

  .workspace {
    min-height: 0;
  }

  .problem-pane,
  .terminal-pane {
    min-height: 0;
    overflow: auto;
  }
}