/* Scene 4 -- "Stacking filters becomes a unit." */

.s4-root { position: relative; }

.s4-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s4-hero { margin-bottom: 4px; }

/* ---- Formula --------------------------------------------------------- */

.s4-formula {
  margin: 6px auto 12px;
  padding: 8px 12px;
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.s4-formula .katex-display { margin: 0; }

/* ---- Diagram strip --------------------------------------------------- */

.s4-strip {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: stretch;
  padding: 16px 8px 22px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--card-bg);
}

.s4-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.s4-col-label {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-secondary);
  text-align: center;
}

.s4-input-host {
  width: 168px;
  height: 168px;
  border: 1px solid var(--rule);
  background: var(--bg);
}

.s4-out-host {
  width: 168px;
  height: 168px;
  border: 1px solid var(--rule);
  background: var(--bg);
}

/* ---- Three feature-map columns -------------------------------------- */

.s4-col-fmaps {
  align-items: stretch;
}

.s4-fmaps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.s4-fpanel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 8px 6px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
}

.s4-fpanel-top {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.s4-kernel-host {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border: 1px solid var(--rule);
  background: var(--card-bg);
}

.s4-fpanel-cap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.s4-fpanel-name {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
}

.s4-fpanel-key {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--ink-secondary);
}

.s4-fmap-host {
  width: 140px;
  height: 140px;
  border: 1px solid var(--rule);
  background: var(--card-bg);
}

/* ---- Wire diagram (SVG overlay) -------------------------------------- */

.s4-wires {
  position: absolute;
  /* Cover the gap between the fmaps column and the output column. */
  top: 24px;
  bottom: 24px;
  left: 36%;
  right: 0;
  pointer-events: none;
}

.s4-wires svg {
  width: 100%;
  height: 100%;
}

.s4-wire,
.s4-wire-out {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
}

.s4-wires-lit .s4-wire,
.s4-wires-lit .s4-wire-out {
  stroke: var(--cnn-pos);
  stroke-dasharray: 0;
}

.s4-unit {
  fill: var(--card-bg);
  stroke: var(--rule);
  stroke-width: 1.5;
}

.s4-wires-lit .s4-unit {
  stroke: var(--ink);
  stroke-width: 1.8;
}

.s4-unit-label {
  fill: var(--ink-secondary);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 16px;
}

.s4-wires-lit .s4-unit-label { fill: var(--ink); }

.s4-relu-label {
  fill: var(--ink-secondary);
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic;
  font-size: 11px;
}

/* Particle dashes that crawl along the wires when wires-particles is set.
   A CSS dash animation gets the point across with zero per-frame JS cost. */
.s4-wires-particles .s4-wire,
.s4-wires-particles .s4-wire-out {
  stroke: var(--cnn-pos);
  stroke-dasharray: 4 6;
  animation: s4-wire-flow 1.1s linear infinite;
}

@keyframes s4-wire-flow {
  to { stroke-dashoffset: -20; }
}

/* ---- Numeric readout ------------------------------------------------- */

.s4-readout {
  display: none;
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-align: center;
}
.s4-readout.visible { display: block; }

.s4-readout-label {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-secondary);
  margin-bottom: 4px;
}

.s4-readout-tex { color: var(--ink); }
.s4-readout-tex .katex-display { margin: 4px 0 0; }

/* ---- Controls / caption --------------------------------------------- */

.s4-controls { margin-top: 6px; }

.s4-controls input[type="range"] { width: 200px; }

.s4-caption {
  text-align: center;
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--ink);
}