.water-walkthrough {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #bdc7a9;
  border-radius: 8px;
  background: var(--paper);
}
.water-map {
  background: #edf2d9;
  border-bottom: 1px solid #bdc7a9;
}
.water-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.water-map-hill-far { fill: #d9e2be; }
.water-map-hill-near { fill: #c4d1a8; }
.water-map-contour { stroke: #aab987; stroke-width: 2; }
.water-map-branch,
.water-map-stream {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.water-map-branch { stroke: #415d5c; stroke-width: 5; }
.water-map-stream {
  opacity: 0;
  stroke: #146581;
  stroke-width: 7;
  stroke-dasharray: 2 11;
}
.water-map-station circle {
  fill: var(--paper);
  stroke: #697b57;
  stroke-width: 2;
}
.water-map-station > path {
  fill: none;
  stroke: #315234;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.water-map text {
  fill: var(--forest);
  font: 700 22px var(--font-body);
  text-anchor: middle;
}
.water-walkthrough[data-step="0"] .water-map-source circle,
.water-walkthrough[data-step="1"] .water-map-pump circle,
.water-walkthrough[data-step="2"] .water-map-tank circle {
  fill: #fff8e3;
  stroke: #81542b;
  stroke-width: 4;
}
.water-walkthrough[data-step="0"] .water-map-stream-in,
.water-walkthrough[data-step="1"] .water-map-stream,
.water-walkthrough[data-step="2"] .water-map-stream-out { opacity: 1; }
.water-walkthrough[data-playing] .water-map-stream { animation: water-map-flow .75s linear infinite; }
@keyframes water-map-flow { to { stroke-dashoffset: -13; } }

.water-walkthrough-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .6rem;
  padding: .65rem .75rem 0;
}
.water-walkthrough-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.water-walkthrough-controls button {
  min-height: 44px;
  padding: .25rem .55rem;
  border: 1px solid #93a184;
  border-radius: 4px;
  background: var(--paper);
  color: var(--forest);
  font-size: .89rem;
  line-height: 1.15;
  font-weight: 700;
  cursor: pointer;
}
.water-walkthrough-controls button:hover { background: #e9ebda; }
.water-walkthrough-steps button[aria-pressed="true"] {
  color: #fff;
  background: var(--forest);
  border-color: var(--forest);
}
.water-walkthrough-controls .water-walkthrough-play {
  border-color: transparent;
  color: var(--wood);
  text-decoration: underline;
  text-underline-offset: .16em;
}
.water-walkthrough-detail {
  min-height: 5.25em;
  margin: 0;
  padding: .68rem .75rem;
  color: var(--ink);
  font-size: .94rem;
}
@media (prefers-reduced-motion: reduce) {
  .water-walkthrough[data-playing] .water-map-stream { animation: none; }
}