/* Figures for "How a neural network builds features". */
body {
  --fe-bg: #ffffff;
  --fe-ink: #1b1f2a;
  --fe-muted: #5d6273;
  --fe-faint: #c4c8d4;
  --fe-grid: #e8eaf0;
  --fe-tip: #ffffff;
  --fe-shadow: 0 6px 20px rgba(20, 24, 40, .16);
  --fe-w: #d7dae2;
  --fe-w-edge: #a9aebb;
  --fe-on-color: #ffffff;
  --fe-bad: #c8341f;
  --fe-s1: #2a78d6;
  --fe-s2: #eb6834;
  --fe-s3: #1baf7a;
  --fe-s4: #eda100;
  --fe-lo: #f3f6fb;
  --fe-hi: #104281;
}
body.quarto-dark {
  --fe-bg: #0a1220;
  --fe-ink: #e8eaf0;
  --fe-muted: #a3a9ba;
  --fe-faint: #3a4358;
  --fe-grid: #1b2436;
  --fe-tip: #151d2e;
  --fe-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  --fe-w: #3b4356;
  --fe-w-edge: #5b647a;
  --fe-on-color: #ffffff;
  --fe-bad: #ef6a52;
  --fe-s1: #3987e5;
  --fe-s2: #d95926;
  --fe-s3: #199e70;
  --fe-s4: #c98500;
  --fe-lo: #0f1a2c;
  --fe-hi: #8fc0f7;
}

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