/* align-explainer.css: the two self-playing figures that open the post (ReLU² on a list of twelve
   numbers, then the table of weights on the GPU's slots). In-column, not full-bleed: they are textbook figures,
   not a storyboard. Depends on theme.css. Two signed scales, so a reader can tell the two kinds of number
   apart at a glance: --sign-* is the STORED WEIGHTS, the brand's functional red and green
   (color.functional.error / .success in tokens/tokens.json), and --tok-* is THIS TOKEN'S numbers, amber for
   positive and slate for negative (color.signal.amber and color.dataviz.slate). The token pair is the same in
   both themes, the way the amber of a live value always has been, and only the weights swap for paper; neither
   pair is exposed by theme.css, hence the literals. Amber is the token colour everywhere in the figures, so a live
   value after ReLU² and a positive value before it are the same colour. */
.aha{margin:30px 0 40px;
  --sign-neg:#E5604B;--sign-pos:#7FB07A;
  --tok-neg:#7B8494;--tok-pos:#E8B14C;}
:root[data-theme="light"] .aha{--sign-neg:#C0442E;--sign-pos:#4C8A5A;}
.aha canvas{display:block;width:100%;background:var(--void);cursor:pointer;}
.aha-bar{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap;}
.aha-chip{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);
  background:none;border:1px solid var(--line2);border-radius:999px;padding:5px 11px;cursor:pointer;line-height:1.2;}
.aha-chip:hover{color:var(--ink);border-color:var(--ink3);}
.aha-chip.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);}
.aha-play{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink2);background:none;border:0;padding:5px 2px;cursor:pointer;}
.aha-play:hover{color:var(--accent-text);}
/* the beat captions: an ordinary list without JavaScript, one caption at a time with it */
.note .body .aha-beats{margin:14px 0 0;padding-left:22px;font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ink2);}
.note .body .aha-beats li{margin-bottom:6px;}
.aha.is-live .aha-beats{display:none;}
.note .body .aha-cap{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink);margin:12px 0 0;min-height:4.7em;}
@media(max-width:600px){.note .body .aha-cap{font-size:15px;min-height:6.2em;}.aha-chip{padding:4px 8px;font-size:10px;}}