/* Convolution — the core idea LeCun built deep vision on. A small kernel slides
   across the image computing the same few weights everywhere (weight sharing); the
   result is a feature map that lights up where the kernel's pattern appears. A CNN
   learns these filters from data instead of hand-designing them. Vanilla JS, no deps.
   Dark theme. Palette shared with siblings: cyan = feature response, white = input
   ink, white = primary control. No red. */

#conv-kernel {
  --ck-feat: #5ac8fa;                /* feature-map response */
  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);
}
.ck-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.ck-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

/* kernel selector */
.ck-kernels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ck-kernel {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.84rem;
  color: var(--color-text-secondary, rgba(255,255,255,0.6)); background: transparent;
  border: 1px solid var(--color-border, rgba(255,255,255,0.14)); border-radius: 8px; padding: 7px 13px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.ck-kernel:hover { color: var(--color-text-primary, #fff); border-color: rgba(255,255,255,0.4); }
.ck-kernel.is-on { color: #0b0b0b; font-weight: 650; background: var(--color-accent, #fff); border-color: var(--color-accent, #fff); }

.ck-stage { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.ck-pane { display: flex; flex-direction: column; gap: 7px; }
.ck-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--color-text-tertiary, rgba(255,255,255,0.42)); margin: 0; }
.ck-grid { display: grid; gap: 1px; background: rgba(0,0,0,0.4); padding: 4px; border-radius: 8px; }
.ck-cell { width: var(--ck-cell, 15px); height: var(--ck-cell, 15px); border-radius: 2px; background: var(--color-bg-surface, #1c1c1f); transition: background 0.12s; }
.ck-cell.win { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85); z-index: 1; }

/* the 3x3 kernel matrix readout */
.ck-mat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 132px; }
.ck-mat span {
  font-family: var(--font-mono, monospace); font-size: 0.74rem; text-align: center;
  padding: 6px 0; border-radius: 5px; background: var(--color-bg-surface, #1a1a1a);
  color: var(--color-text-secondary, rgba(255,255,255,0.7)); font-variant-numeric: tabular-nums;
}
.ck-caption { margin-top: 14px; font-size: 0.88rem; line-height: 1.5; color: var(--color-text-secondary, rgba(255,255,255,0.72)); }
.ck-caption b { color: #fff; }
.ck-controls { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ck-btn { appearance: none; cursor: pointer; font: inherit; font-size: 0.88rem; border: 1px solid var(--color-border, rgba(255,255,255,0.15)); background: transparent; color: var(--color-text-primary,#fff); border-radius: 9px; padding: 9px 16px; transition: border-color 0.15s, background 0.15s; }
.ck-btn:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.ck-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }