.mnist-demo { margin: 28px 0; padding: 22px; border: 1px solid #cddbea; border-radius: 12px; background: #f8fafc; }
.mnist-demo > .revolution-heading { margin-top: 0; }
.mnist-training { margin: 20px auto; text-align: center; }
.mnist-training .mnist-history { justify-content: center; }
.mnist-advanced, .mnist-scan { text-align: left; }
.mnist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mnist-demo button { border: 1px solid #0b60d4; border-radius: 7px; min-height: 44px; padding: 9px 14px; background: #0b60d4; color: white; cursor: pointer; font-size: .9rem; line-height: 1.35; }
.mnist-demo .mnist-secondary { color: #0759c8; background: white; border-color: #b7c8de; }
.mnist-status { margin: 12px 0 8px; font-size: .9rem; }
.mnist-demo progress { width: 100%; height: 12px; accent-color: #0b60d4; }
.mnist-accuracy { margin: 12px 0 6px; }
.mnist-accuracy strong { color: #0759c8; }
.mnist-help { font-size: .85rem; line-height: 1.55; color: var(--muted); margin: 10px 0; }
.mnist-history { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 12px 0 0; padding: 0; font-size: .8rem; color: var(--muted); }
.mnist-history:empty { display: none; }
.mnist-history strong { color: var(--ink); }
.mnist-card { min-width: 0; border: 1px solid #d8e1ec; border-radius: 9px; padding: 16px; background: white; }
.mnist-card h5 { font-size: 1rem; margin: 0; }
.mnist-test-canvas { display: block; width: 140px; height: 140px; margin: 16px auto; image-rendering: pixelated; background: #111827; border-radius: 5px; }
.mnist-result { font-size: .95rem; font-weight: 650; line-height: 1.5; margin: 12px 0; min-height: 1.5em; }
.mnist-result[data-correct="true"] { color: #146c43; }
.mnist-result[data-correct="false"] { color: #a1251b; }
.mnist-slider-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: .85rem; }
.mnist-demo input[type="range"] { display: block; width: 100%; min-height: 44px; margin: 2px 0 8px; accent-color: #0b60d4; }
.mnist-filter { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .85rem; cursor: pointer; }
.mnist-filter input { width: 18px; height: 18px; accent-color: #0b60d4; }
.mnist-shift-controls { border-top: 1px solid #d8e1ec; margin-top: 16px; padding-top: 16px; }
.mnist-draw-canvas { display: block; width: min(100%, 280px); height: auto; aspect-ratio: 1; background: #111827; border: 1px solid #6d7d93; border-radius: 6px; margin: 16px auto; touch-action: none; cursor: crosshair; }
.mnist-drawing-result { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.mnist-drawing-result > div { min-width: 0; }
.mnist-input-preview { flex: 0 0 76px; margin: 0; }
.mnist-input-preview canvas { display: block; width: 70px; height: 70px; background: #111827; image-rendering: pixelated; border-radius: 4px; }
.mnist-input-preview figcaption { font-size: .7rem; line-height: 1.4; margin-top: 5px; }
.mnist-method { margin: 20px 0 12px; }
.mnist-method > summary { color: #0759c8; font-size: 1.2rem; font-weight: 650; line-height: 1.4; cursor: pointer; min-height: 44px; padding-block: 8px; box-sizing: border-box; }
.mnist-method > summary > .revolution-heading { display: inline; margin: 0; font: inherit; }
.mnist-scan > summary { color: #0759c8; font-size: .9rem; font-weight: 600; cursor: pointer; padding-block: 8px; min-height: 44px; box-sizing: border-box; }
.mnist-scan { margin-top: 20px; }
.mnist-drawing-card { max-width: 420px; margin: 20px auto; }
.mnist-drawing-card .mnist-actions { justify-content: center; }
.mnist-drawing-card .mnist-drawing-result { justify-content: center; margin: 16px 0; }
.mnist-test-card { margin-top: 8px; }
.mnist-demo [hidden] { display: none; }
@media (max-width: 560px) {
  .mnist-demo { padding: 12px; }
  .mnist-card { padding: 12px; }
  .mnist-demo button { font-size: .85rem; }
  .mnist-demo > .revolution-heading { font-size: 1.08rem; }
  .mnist-drawing-result { gap: 10px; }
}

.mnist-structure { max-width: 420px; margin: 20px auto; }
.mnist-structure img { display: block; width: 100%; height: auto; }

.mnist-readings { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: baseline; }
.mnist-reading-alternative { grid-column: 2; color: var(--muted); font-size: .85rem; font-weight: 400; }

.mnist-drawing-result .mnist-result { margin: 0; }
@media (max-width: 560px) {
  .mnist-drawing-result .mnist-input-preview { flex-basis: 48px; }
  .mnist-drawing-result .mnist-input-preview canvas { width: 44px; height: 44px; }
  .mnist-drawing-result .mnist-result { font-size: .9rem; column-gap: 6px; }
}

.mnist-learning h5 { font-size: 1.05rem; margin: 24px 0 12px; }
.mnist-learning li + li { margin-top: .6em; }

.mnist-formula { padding: 10px 12px; border-radius: 7px; background: #eaf1fb; font-family: ui-monospace, monospace; font-size: .9em; line-height: 1.8; overflow-wrap: anywhere; }
.mnist-update-example { padding: 12px; border-left: 3px solid #8aaddb; background: #f1f5fb; }

.mnist-training-options { min-width: 0; margin: 0 0 12px; padding: 12px 16px; border: 1px solid #cddbea; border-radius: 8px; background: white; }
.mnist-advanced { margin: 2px 0 8px; }
.mnist-advanced > summary { color: #0759c8; font-size: .8rem; font-weight: 500; cursor: pointer; padding-block: 8px; min-height: 44px; box-sizing: border-box; }
.mnist-training-options .mnist-slider-label { margin-top: 14px; }
.mnist-training-options .mnist-filter { display: flex; }
.mnist-training-options input { flex-shrink: 0; }

.mnist-training-options select { display: block; width: 100%; max-width: 440px; min-height: 44px; margin-top: 6px; padding: 7px 9px; font: inherit; font-size: .85rem; color: var(--ink); background: white; border: 1px solid #b7c8de; border-radius: 6px; box-sizing: border-box; }

.mnist-method [hidden] { display: none; }