/* Data-centric scaling — Fei-Fei Li's bet, made tangible. The model (a 1-nearest-
   neighbor classifier) never changes. Grow the labeled training data and the same
   algorithm traces the true boundary ever more accurately. The lesson behind
   ImageNet: the algorithm was waiting for the dataset. Vanilla JS + canvas, no deps.
   Dark theme. Palette shared with siblings: cyan = one class region, green = high
   accuracy (the win). No red. */

#data-scaling {
  --ds-a: #5ac8fa;                   /* class A region */
  --ds-win: #30d158;                 /* high accuracy */
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px; padding: clamp(16px, 3vw, 26px); margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}
.ds-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.ds-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.ds-stage { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.ds-canvas { background: #0c0c0f; border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 10px; display: block; }
.ds-side { display: flex; flex-direction: column; gap: 14px; min-width: 180px; flex: 1; }

.ds-metric { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 12px; padding: 13px 16px; transition: border-color 0.25s; }
.ds-metric.win { border-color: var(--ds-win); }
.ds-metric .ds-k { font-size: 0.78rem; color: var(--color-text-secondary, rgba(255,255,255,0.55)); }
.ds-metric .ds-v { font-size: 1.5rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.15; }
.ds-metric.win .ds-acc { color: var(--ds-win); }
.ds-n b { color: #fff; font-variant-numeric: tabular-nums; }
.ds-nlabel { font-size: 0.8rem; color: var(--color-text-secondary, rgba(255,255,255,0.6)); }
.ds-slider { width: 100%; accent-color: var(--ds-a); }
.ds-caption { font-size: 0.84rem; line-height: 1.5; color: var(--color-text-secondary, rgba(255,255,255,0.72)); min-height: 2.4em; }

.ds-controls { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ds-btn { appearance: none; cursor: pointer; font: inherit; font-size: 0.86rem; border: 1px solid var(--color-border, rgba(255,255,255,0.15)); background: transparent; color: var(--color-text-primary,#fff); border-radius: 9px; padding: 8px 14px; transition: border-color 0.15s, background 0.15s, opacity 0.15s; }
.ds-btn:hover:not(:disabled) { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.ds-btn:disabled { opacity: 0.45; cursor: default; }
.ds-btn--primary { background: var(--color-accent, #fff); border-color: var(--color-accent, #fff); color: #0b0b0b; font-weight: 650; }
.ds-btn--primary:hover:not(:disabled) { opacity: 0.9; background: var(--color-accent, #fff); }
.ds-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }