[data-water-scene] {
  --water-fade-depth: 600px;
  --water-surface: calc(100% - var(--water-bottom-space));
  --wall-tile-size: 128px;
  --wall-tile-width: 256px;
  position: absolute;
  isolation: isolate;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}
[data-water-scene]::before {
  content: "";
  position: absolute;
  inset: calc(var(--water-surface) - 54px) 0 calc(-1 * var(--water-fade-depth));
  border-top: 8px solid var(--site-tone-314752, #314752);
  box-shadow: inset 0 1px color-mix(in srgb, var(--site-tone-92a7b5, #92a7b5) 30.196078%, transparent), 0 -1px color-mix(in srgb, var(--site-tone-7d96a3, #7d96a3) 20.0%, transparent);
  background:
    linear-gradient(color-mix(in srgb, var(--site-tone-12364a, #12364a) 0.0%, transparent) 46px, color-mix(in srgb, var(--site-tone-0a263b, #0a263b) 40.0%, transparent) 140px, var(--site-background, #050b13) 650px),
    repeating-linear-gradient(90deg, var(--site-tile-grout, #223b48) 0 1px, transparent 1px var(--wall-tile-width)),
    repeating-linear-gradient(0deg, var(--site-tile-grout, #223b48) 0 1px, transparent 1px var(--wall-tile-size)),
    linear-gradient(var(--site-tone-203844, #203844) 46px, var(--site-tone-26516e, #26516e) 46px, var(--site-tone-122f4b, #122f4b) 380px, var(--site-background, #050b13));
  pointer-events: none;
}
[data-water-scene]::after {
  content: "";
  position: absolute;
  top: var(--water-surface);
  left: 0;
  right: 0;
  height: 2px;
  background: color-mix(in srgb, var(--site-tone-a1d6e6, #a1d6e6) 65.098039%, transparent);
  pointer-events: none;
}
[data-water-scene].water-wall-ready::before { display: none; }
[data-water-scene].water-scene-ready::after { display: none; }
[data-water-scene] .water-surface-position {
  position: absolute;
  top: var(--water-surface);
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
}
[data-water-scene] .water-scene-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: calc(100% + var(--water-fade-depth));
  pointer-events: none;
}
[data-water-scene] .water-feed,
[data-water-scene] .water-fixture,
[data-water-scene] .water-fixture-shadow {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}
[data-water-scene] .water-fixture-shadow { z-index: 0; }
[data-water-scene] .water-feed,
[data-water-scene] .water-fixture { z-index: 2; }
[data-water-scene] .water-pipe-control {
  pointer-events: visiblePainted;
  cursor: pointer;
}
[data-water-scene] .water-valve {
  position: absolute;
  z-index: 3;
  display: block;
  width: 160px;
  height: 160px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--site-tone-dcecf4, #dcecf4);
  transform: translate(-50%, -50%);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
[data-water-scene] .water-valve:active { cursor: grabbing; }
[data-water-scene] .water-valve:focus-visible {
  outline: none;
}
[data-water-scene] .water-valve svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

[data-water-scene] .water-corrosion { opacity: 0; pointer-events: none; }
.water-scene-broken .water-corrosion { opacity: 1; }
.water-scene-broken .water-valve-visual { transform: translate(-2px, -1px) rotate(-4deg) skewX(-2deg) scaleY(0.985); }
.water-scene-broken .water-valve-visual,
.water-scene-broken .water-fixture,
.water-scene-broken .water-feed { filter: saturate(0.8) sepia(0.15) contrast(0.65) brightness(0.82); }
.water-scene-broken .water-fixture,
.water-scene-broken .water-fixture-shadow { transform: rotate(7deg); }
.water-scene-pipe-fixed .water-fixture,
.water-scene-pipe-fixed .water-fixture-shadow,
.water-scene-pipe-fixed .water-feed { transform: none; }
.water-scene-pipe-fixed .water-fixture,
.water-scene-pipe-fixed .water-feed { filter: none; }
.water-scene-pipe-fixed .water-fixture .water-corrosion { opacity: 0; }
[data-water-scene] .water-fixture,
[data-water-scene] .water-fixture-shadow { transform-origin: 98.286% 63.667%; }
.water-scene-repairing .water-valve-visual { transition: transform 720ms ease-in-out, filter 720ms ease-in-out; }
.water-scene-repairing .water-fixture,
.water-scene-repairing .water-fixture-shadow { transition: transform 720ms ease-in-out, filter 720ms ease-in-out; }
.water-scene-repairing .water-feed { transition: transform 720ms ease-in-out, filter 720ms ease-in-out; }
.water-wheel-intact { opacity: 1; }
.water-wheel-damaged { opacity: 0; }
.water-scene-broken .water-wheel-intact { opacity: 0; }
.water-scene-broken .water-wheel-damaged { opacity: 1; }
.water-scene-repairing .water-wheel-intact,
.water-scene-repairing .water-wheel-damaged { transition: opacity 620ms ease-in-out; }
.water-scene-repairing .water-corrosion { transition: opacity 650ms ease-in-out 50ms; }
[data-water-scene] .water-valve[aria-disabled="true"] { cursor: default; }
[data-water-scene]:is(.water-scene-broken, .water-scene-repairing) .water-pipe-control { cursor: default; }

[data-water-scene] .water-scene-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 700px) {
  [data-water-scene] {
    --water-fade-depth: 650px;
    --wall-tile-size: 88px;
    --wall-tile-width: 176px;
  }
}

.water-wrench-tool {
  --tool-width: 100px;
  --tool-height: 166.667px;
  --tool-rest-angle: -24deg;
  --tool-held-angle: -28deg;
  --tool-hotspot-horizontal: 0.28;
  --tool-hotspot-vertical: 0.25;
  --tool-bob-distance: -12px;
  --tool-bob-angle: 8deg;
  transition: opacity 240ms ease-out;
}
.water-wrench-repairing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease-in-out;
}
.water-wrench-dismissing {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  .water-wrench-tool {
    --tool-width: 88px;
    --tool-height: 146.667px;
  }
}

@media (max-height: 450px) {
  .water-wrench-tool {
    --tool-width: 74px;
    --tool-height: 123.333px;
  }
}