/* The Zeppelin samplers explainer, scoped under .zsg (the site's styles cannot reach in, these cannot reach out).
   Light mode only. Pure HTML and SVG: all four steps show without JavaScript; the motion (particles drifting into the
   filter, snow and rain falling into the bucket, the heating coils glowing) runs only when the reader allows motion
   and never in the still. Plastic pieces in four colours stand for different kinds of plastic. */
.zsg {
  --bg: #fbfbfa; --ink: #121518; --ink-2: #353a41; --quiet: #5f666f; --faint: #8b929b; --grid: #e6e8eb;
  --sky: #eaf2f7; --snow: #ffffff; --snow-edge: #c9d1d8; --rock: #8d8173; --rail: #6b737c;
  --p1: #e8600a; --p2: #1d5a85; --p3: #2a9d8f; --p4: #7b4ea3;
  --f-serif: var(--font-serif, "Source Serif 4"), Georgia, "Times New Roman", serif;
  --f-data: var(--font-data, "IBM Plex Sans Condensed"), "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
  background: var(--bg); color: var(--ink); font-family: var(--f-serif); font-size: 17px; line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
.zsg, .zsg *, .zsg *::before, .zsg *::after { box-sizing: border-box; }
.zsg h3, .zsg h4, .zsg p, .zsg ol, .zsg li { margin: 0; padding: 0; }
.zsg ol { list-style: none; }
.zsg svg { display: block; width: 100%; height: auto; overflow: visible; }

.zsg .zs-h { margin: 0 0 14px; font-family: var(--f-serif); font-size: clamp(21px, 2.3vw, 27px); font-weight: 700; line-height: 1.15; letter-spacing: -.012em; text-wrap: balance; max-width: 900px; }
.zsg .zs-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; counter-reset: zs; }
@media (min-width: 640px) { .zsg .zs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; } }
.zsg .zs-step { display: flex; flex-direction: column; gap: 8px; min-width: 0; border-top: 1px solid var(--ink); padding-top: 10px; }
.zsg .zs-sh { display: flex; align-items: baseline; gap: 9px; font-family: var(--f-data); font-size: 17px; font-weight: 700; line-height: 1.2; }
.zsg .zs-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; transform: translateY(-1px); }
.zsg .zs-txt { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.zsg .zs-note { margin: 22px 0 0; padding: 10px 14px; background: var(--grid); border-left: 4px solid var(--ink); font-family: var(--f-data); font-size: 16px; font-weight: 600; line-height: 1.35; }
.zsg .zs-credit { font-family: var(--f-data); font-size: 13px; color: var(--quiet); line-height: 1.4; margin: 12px 0 0; }

/* the drawings */
.zsg .zs-sky { fill: var(--sky); }
.zsg .zs-lab { fill: #f3f1ec; }
.zsg .zs-snow { fill: var(--snow); stroke: var(--snow-edge); stroke-width: 1; }
.zsg .zs-rock { fill: var(--rock); }
.zsg .zs-rail line { stroke: var(--rail); stroke-width: 3; stroke-linecap: round; }
.zsg .zs-metal { stroke: var(--quiet); stroke-width: 1.2; }
.zsg .zs-inner { fill: #4a525a; stroke: var(--quiet); stroke-width: 1.2; }
.zsg .zs-holder { fill: #c9d0d6; stroke: var(--ink-2); stroke-width: 1.2; }
.zsg .zs-clamp { fill: var(--ink-2); }
.zsg .zs-mesh { stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 2 2; }
.zsg .zs-fan circle { fill: #fff; stroke: var(--ink-2); stroke-width: 1.2; }
.zsg .zs-fan path { stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.zsg .zs-bracket { stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.zsg .zs-flow { fill: none; stroke: #5d8bb0; stroke-width: 2; stroke-dasharray: 5 4; }
.zsg .zs-arrow { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.zsg .zs-lead { stroke: var(--ink); stroke-width: .9; }
.zsg .zs-flake { stroke: #6f8ca3; stroke-width: 1.4; stroke-linecap: round; fill: none; }
.zsg .zs-drop { stroke: #5d8bb0; stroke-width: 1.8; stroke-linecap: round; }
.zsg .zs-cal rect { fill: #fff; stroke: var(--ink-2); stroke-width: 1.4; }
.zsg .zs-cal path { stroke: var(--ink-2); stroke-width: 1.4; stroke-linecap: round; }
.zsg .zs-unit { fill: #3b4249; }
.zsg .zs-window { fill: #fff3e8; }
.zsg .zs-coil { fill: none; stroke: var(--p1); stroke-width: 2.2; stroke-linejoin: round; }
.zsg .zs-bond { stroke: var(--ink-2); stroke-width: 2; }
.zsg .zs-screen { fill: #fff; stroke: var(--ink-2); stroke-width: 1.2; }
.zsg .zs-axis { stroke: var(--ink-2); stroke-width: 1.2; }
.zsg .zs-p1 { fill: var(--p1); } .zsg .zs-p2 { fill: var(--p2); } .zsg .zs-p3 { fill: var(--p3); } .zsg .zs-p4 { fill: var(--p4); }
.zsg .zs-tag { font-family: var(--f-data); font-size: 13px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px; stroke-linejoin: round; }
.zsg .zs-tag.zs-mid { text-anchor: middle; }
.zsg .zs-tag.zs-sm { font-size: 12px; }
.zsg .zs-tag.zs-inv { fill: #fff; stroke: none; font-size: 15px; }

/* the motion, only where the reader allows it, never in the still */
@media (prefers-reduced-motion: no-preference) {
  .zsg:not(.still) .zs-drift { animation: zs-drift 3.2s ease-in-out infinite alternate; }
  .zsg:not(.still) .zs-fall { animation: zs-fall 2.8s ease-in-out infinite alternate; }
  .zsg:not(.still) .zs-coil { animation: zs-glow 1.6s ease-in-out infinite alternate; }
  .zsg:not(.still) .zs-break { animation: zs-part 2.4s ease-in-out infinite alternate; }
}
@keyframes zs-drift { from { transform: translate(-8px, 2px); } to { transform: translate(10px, -2px); } }
@keyframes zs-fall { from { transform: translateY(-6px); } to { transform: translateY(10px); } }
@keyframes zs-glow { from { opacity: .45; } to { opacity: 1; } }
@keyframes zs-part { from { transform: translateX(-3px); } to { transform: translateX(3px); } }

/* The report's figures (Z7): two bar panels in plain HTML, positioned by build.py (no script). One neutral blue for
   Zeppelin, grey for the other two stations; values in ink beside every bar; panels stacked on a phone, side by side
   from 760 px. */
.zsg { --zep: #2b6a9e; --other: #8b929b; }
.zsg .zf-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
@media (min-width: 760px) { .zsg .zf-panels { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; } }
.zsg .zf-panel { min-width: 0; border-top: 1px solid var(--ink); padding-top: 10px; }
.zsg .zf-h { font-family: var(--f-serif); font-size: clamp(19px, 2vw, 23px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.zsg .zf-unit { margin: 6px 0 14px; font-family: var(--f-data); font-size: 14px; color: var(--quiet); line-height: 1.35; }
.zsg .zf-plot { position: relative; font-family: var(--f-data); font-size: 13px; line-height: 1; }
.zsg .zf-bar { display: block; height: 100%; border-radius: 0 3px 3px 0; flex: none; }
.zsg .zf-zep { background: var(--zep); }
.zsg .zf-other { background: var(--other); }
.zsg .zf-val { flex: none; padding: 0 3px 0 5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--bg); position: relative; z-index: 2; }
/* panel A: dates down the left, a value axis from 0 to the right */
.zsg .zf-labs { position: absolute; left: 0; top: 0; bottom: 0; width: 96px; }
.zsg .zf-lab { position: absolute; left: 0; right: 10px; display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.zsg .zf-track { position: absolute; left: 96px; right: 30px; top: 0; bottom: 0; border-left: 1px solid var(--ink); }
.zsg .zf-row { position: absolute; left: 0; right: 0; display: flex; align-items: center; }
.zsg .zf-avg { position: absolute; top: 4px; bottom: 0; width: 0; border-left: 1.5px dashed var(--ink-2); z-index: 1; }
.zsg .zf-avgl { position: absolute; top: 0; left: 5px; white-space: nowrap; font-weight: 600; color: var(--ink); }
/* panel B: name above each bar, one linear scale from 0 */
.zsg .zf-sts { display: flex; flex-direction: column; gap: 14px; }
.zsg .zf-st { display: flex; flex-direction: column; gap: 5px; }
.zsg .zf-stn { color: var(--ink-2); font-size: 14px; }
.zsg .zf-strow { display: flex; align-items: center; height: 22px; padding-right: 40px; border-left: 1px solid var(--ink); }
.zsg .zf-strow .zf-bar { max-width: 100%; }