Animate a plumbing firm's cistern flush and refill cycle in one self-contained HTML file

# Animate a plumbing firm's cistern flush and refill cycle in one self-contained HTML file Make a small animated scene: a cistern flush and refill. Write one file, `out/scene.html`, that works opened straight from disk with no network access. `spec.json` gives the page title, the stage size and the scene parameters. **Looks are not scored**: the page is opened in a headless browser (800x600 window, UTC time zone, network blocked) and checked by objective tests only. ## Scene contract - Draw the scene on one `<canvas>` or `<svg>` stage of `width` x `height` CSS pixels (spec.json), visible on load, with `<title>` containing spec.json `title`. - Animate continuously from load (`requestAnimationFrame` or timers); no click is needed unless stated below. - Expose `window.sceneState()`, returning the scene's current state in stage pixel coordinates (origin top-left of the stage): `{cisterns: [{name, x, y, level, status: "full" | "draining" | "refilling"}, ...]} (canvas px, y down; one entry per spec.json cistern; x = the cistern's centre; level = the water height in px; y = the water surface, base_y − level)`. Extra fields are fine. It must describe what is actually drawn. - Time 0 is `performance.now()` 0 (seconds = `performance.now()` / 1000). Each cistern is full (level `full_px`) until its own `flush_s`; it then drains at a steady rate to level 0 over `drain_s`; it then refills over `refill_s` with the float valve slowing it down: level = `full_px` × (1 − (1 − u)²), where u = (time − flush_s − drain_s) ÷ refill_s; after that it stays full. The surface y is `base_y` − level. Draw each cistern and its water. `sceneState()` must return the state at the moment it is called. - The page must log no errors and throw no exceptions. Keep the file at most 200,000 bytes; no external scripts, fonts, images or URLs (inline everything). ## Checks (partial credit = share passed) 1. `self_contained`: `out/scene.html` exists, is at most 200,000 bytes, references no http(s) or protocol-relative URL, and requests nothing from the network when opened. 2. `has_canvas_or_svg`: a visible `<canvas>` or `<svg>` of at least 300x200 CSS pixels is on the page. 3. `frames_change`: over 3 s, some later screenshot differs from the first in at least 0.1% of pixels, and at least 3 of 30 screenshots differ. 4. `water_level`: at every sample more than 0.05 s from a cistern flushing, emptying or finishing its refill, each cistern's x is within 1.5 px of its spec.json `x`, and its level and surface y are within 1.5 px of the exact values: `full_px` while full, falling linearly to 0 over `drain_s` from `flush_s`, then refilling as full_px × (1 − (1 − u)²) with u = time since emptying ÷ `refill_s`, then `full_px` again. 5. `cistern_status`: at those samples each cistern's `status` is full before `flush_s`, draining for `drain_s`, refilling for `refill_s`, then full; the samples include all three statuses. 6. `no_console_errors`: no uncaught exception, `console.error` or browser error is logged during the run. ## How this run works - Work on your own: nobody will answer questions in this task, and writing to `ask/` counts against the run. - Write only under `out/`. Create `out/` if it is missing. Inputs are synthetic; don't fetch anything from the network. - Scoring is partial credit: each listed check is pass/fail, and the score is the share passed. Numbers are compared to within 0.005 unless the task says otherwise.