/* Interactive figures for "Interpretations of what a neural network is". */
body {
  --nn-bg: #ffffff;
  --nn-ink: #1b1f2a;
  --nn-muted: #5d6273;
  --nn-faint: #c4c8d4;
  --nn-grid: #e8eaf0;
  --nn-tip: #ffffff;
  --nn-shadow: 0 6px 20px rgba(20, 24, 40, .16);
  --nn-s1: #2a78d6;
  --nn-s2: #eb6834;
  --nn-s3: #1baf7a;
  --nn-s4: #eda100;
  --nn-s5: #e87ba4;
  --nn-s6: #008300;
  --nn-lo: #b7d3f6;
  --nn-hi: #104281;
}
body.quarto-dark {
  --nn-bg: #0a1220;
  --nn-ink: #e8eaf0;
  --nn-muted: #a3a9ba;
  --nn-faint: #3a4358;
  --nn-grid: #1b2436;
  --nn-tip: #151d2e;
  --nn-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  --nn-s1: #3987e5;
  --nn-s2: #d95926;
  --nn-s3: #199e70;
  --nn-s4: #c98500;
  --nn-s5: #d55181;
  --nn-s6: #2a9a2a;
  --nn-lo: #1c5cab;
  --nn-hi: #cde2fb;
}

.nn-fig { margin: 1.5rem 0 2rem; color: var(--nn-ink); }
.nn-fig svg { display: block; width: 100%; height: auto; overflow: visible;
  font-family: inherit; touch-action: pan-y; user-select: none; }
.nn-fig svg text { fill: var(--nn-ink); font-size: 12px; }
.nn-fig svg .nn-tick { fill: var(--nn-muted); font-size: 11px; }
.nn-fig svg .nn-grid { stroke: var(--nn-grid); stroke-width: 1; }
.nn-fig svg .nn-axis { stroke: var(--nn-faint); stroke-width: 1; }
.nn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.nn-row > * { flex: 1 1 280px; min-width: 0; }
.nn-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-bottom: .5rem; font-size: .9rem; }
.nn-controls input[type=range] { flex: 0 1 220px; accent-color: var(--nn-s1); }
.nn-controls output { font-variant-numeric: tabular-nums; min-width: 9ch; }
.nn-btn { font: inherit; font-size: .85rem; padding: .2rem .65rem; border-radius: 999px;
  border: 1px solid var(--nn-faint); background: transparent; color: var(--nn-ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.nn-btn[aria-pressed=true] { border-color: var(--nn-muted); }
.nn-btn[aria-pressed=false] { color: var(--nn-muted); }
.nn-btn[aria-pressed=false] .nn-swatch { opacity: .25; }
.nn-btn:hover, .nn-btn:focus-visible { border-color: var(--nn-ink); outline: none; }
.nn-swatch { width: .8rem; height: .25rem; border-radius: 2px; display: inline-block; }
.nn-caption { font-size: .9rem; color: var(--nn-muted); margin-top: .5rem; min-height: 2.6em; }
.nn-hint { font-size: .8rem; color: var(--nn-muted); }
.nn-tip { position: fixed; z-index: 9999; pointer-events: none; opacity: 0;
  background: var(--nn-tip); color: var(--nn-ink); box-shadow: var(--nn-shadow);
  border: 1px solid var(--nn-faint); border-radius: 6px; padding: .35rem .55rem;
  font-size: .82rem; line-height: 1.35; transition: opacity .1s; max-width: 260px;
  font-variant-numeric: tabular-nums; }
.nn-hot { cursor: pointer; }
.nn-dim { opacity: .18; transition: opacity .15s; }
.nn-fig svg.nn-big text { font-size: 15px; }
.nn-fig svg.nn-big .nn-tick { font-size: 13px; }