/* Gated memory — the core idea of Kyunghyun Cho's Gated Recurrent Unit, made visible.
   A recurrent network carries a hidden "memory" forward through a sequence. An
   important value is stored at the first step; after that the input is silent. A
   gate decides, at each step, how much of the old memory to keep. Slide it toward
   "keep" and the value survives to the end; slide toward "overwrite" and it washes
   away in a few steps. The real GRU *learns* this gate per step, so the network
   decides for itself what to remember. Vanilla JS, no deps, no build.
   Palette shared with siblings: green = still remembered, cyan = fading, dim = gone.
   No red. */

#gru-gate {
  --gg-keep: #30d158;
  --gg-fade: #5ac8fa;
  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);
}
.gg-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.gg-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 18px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.gg-control { margin-bottom: 18px; }
.gg-control label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.82rem; color: var(--color-text-secondary, rgba(255,255,255,0.7)); margin-bottom: 8px; }
.gg-control .gg-gval { font-family: var(--font-mono, monospace); font-size: 0.95rem; font-weight: 650; color: var(--gg-fade); font-variant-numeric: tabular-nums; }
.gg-slider { width: 100%; appearance: none; height: 6px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(48,209,88,0.5)); outline: none; }
.gg-slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent, #fff); cursor: pointer; border: 2px solid #0b0b0b; }
.gg-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent, #fff); cursor: pointer; border: 2px solid #0b0b0b; }
.gg-ends { display: flex; justify-content: space-between; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-tertiary, rgba(255,255,255,0.42)); margin-top: 6px; }

.gg-seq { display: flex; align-items: flex-end; gap: 6px; height: 130px; padding: 4px 0; }
.gg-step { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.gg-bar-wrap { width: 100%; height: 100%; display: flex; align-items: flex-end; }
.gg-bar { width: 100%; border-radius: 5px 5px 2px 2px; background: var(--gg-fade); transition: height 0.25s, background 0.25s, opacity 0.25s; min-height: 2px; }
.gg-bar.keep { background: var(--gg-keep); }
.gg-bar.gone { background: rgba(255,255,255,0.14); }
.gg-step-lbl { font-family: var(--font-mono, monospace); font-size: 0.64rem; color: var(--color-text-tertiary, rgba(255,255,255,0.4)); }
.gg-step.stored .gg-step-lbl { color: var(--gg-keep); font-weight: 700; }

.gg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 4px; }
.gg-stat { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 10px; padding: 10px 12px; }
.gg-stat .gg-k { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); margin-bottom: 4px; }
.gg-stat .gg-v { font-family: var(--font-mono, monospace); font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.gg-stat .gg-v.keep { color: var(--gg-keep); }
.gg-stat .gg-v.gone { color: var(--gg-fade); }

.gg-caption { margin-top: 14px; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-secondary, rgba(255,255,255,0.78)); min-height: 2.6em; }
.gg-caption b { color: #fff; }
.gg-caption .gg-hl { color: var(--gg-keep); font-weight: 650; }
.gg-caption .gg-lo { color: var(--gg-fade); font-weight: 650; }
.gg-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }