(lines 176-263). "canvas L204" citations below point into that file. Values are transcribed verbatim: real px, real hex/rgba, real gradients. Structural conventions (outer sized box + inner scaled screen, .is-offstage, the html:not(.motion-opt-in) reduced-motion gate) copy the already-shipped C:/Dev/pingo/website/mock.css so the gallery behaves as one system. --------------------------------------------------------------------------- THE NAMED MOMENT, which decides every motion decision in this file: A run is IN FLIGHT. Ping has finished and passed. Download is running with NO honest completion fraction. Upload and bufferbloat have not run. THE CARDINAL RULE, from C:/Dev/pingo/MASTER-CONTEXT.md: "Motion is a liveness cue: nothing hatched, withheld or stale may animate." How that is honoured here, concretely: * The two hatched pending phase chips (UP, BLOAT) have NO animation of any kind, in any state, and section 9 pins that with an explicit `animation: none !important` belt rather than trusting absence. A hatched chip that shimmered beside the running spinner would claim that upload is underway when it has not started. This is the screen's #1 failure mode. * The progress track is HATCHED and perfectly still. See divergence 1. * The three settled readings (ping / jitter / loss) do not animate. A settled reading that shimmers claims to still be arriving. * The five completed history bars do not animate. Only the sixth, which is the run happening now, pulses. It does not GROW: a growing bar would animate a claim about a figure that has not settled. * There is NO numeric count-up anywhere. The 52px download figure is typed once. The arc's `draw` is an entrance that lands on the value and stops. * There is no radar and no device blips. RadarField is mounted on no screen in the app and test/screens/home_steel_test.dart:155 asserts it stays absent. * No brand accent hue. Mint / amber / red mean pass / caution / fail and nothing else. The only red on this screen is Stop, because destructive actions get red and may not borrow the fail hue for decoration. THE TWO STOP STATES, both landing on HONEST FINAL FRAMES: * .pgs-speed.is-offstage (section 8) — the gallery shell toggles it so only the ACTIVE screen animates. This is the web's TickerMode and it mirrors the app's IndexedStack, where offstage tabs genuinely stop ticking. It is deliberately NOT gated on any preference: offstage is a performance fact. * @media (prefers-reduced-motion: reduce) (section 10) — byte-identical final frames, every selector gated on html:not(.motion-opt-in) so index.html's existing "Play the motion" opt-in keeps working. Exactly as styles.css and mock.css already do. Neither block ever uses `animation-play-state: paused` and neither ever freezes a mid-frame. What each animation rests on, and why: - pgsspeedRing vanishes (display:none). Its 100% frame IS opacity 0, so "no ring" is its honest final frame. - pgsspeedDraw `animation: none` reverts the arc to the dasharray / dashoffset ATTRIBUTES on the element, i.e. the COMPLETE value. A partial arc would misstate the measurement. - pgsspeedBreathe parks on its own 0% rest frame (opacity .5, scale 1), matching mock.css's treatment of pgmBreathe. - pgsspeedPulse holds FULLY LIT (opacity 1, its own 0%/100% frame). A live thing dimmed to 28% would understate it. - pgsspeedBlink holds FULLY LIT (opacity 1, its own 0% frame). Same reasoning as a live dot: the download phase genuinely is running, and an invisible caret understates that. Note this deliberately does NOT use the 100% frame (opacity 0); mock.css sets the same precedent by parking pgmBreathe on its 0% rest frame rather than its 100%. - pgsspeedSpin holds at rotate(0), bright quadrant at the top, which is the conventional static "in progress" badge. An indeterminate spinner has no true final frame, and HIDING it would leave the running chip indistinguishable from the pending ones except for the hatch, understating a phase that really is executing. --------------------------------------------------------------------------- ILLUSTRATIVE VALUES (chosen here, NOT measured). The canvas left {{mbps}}, {{ping}} and {{jit}} as template holes that render EMPTY in a real browser: * DOWNLOAD 214 Mb/s — the in-flight partial reading, used in BOTH places the canvas templated {{mbps}} (the dial, canvas L199, and the sixth history bar, canvas L240) so the two agree. Deliberately NOT the 231 that mock.html/index.html use for Home's settled downlink: this is a DIFFERENT run that has not finished, and reusing 231 would imply the same measurement. 214 also sits inside the history range 188-255, so the sixth bar's height (31px, canvas L240) stays plausible against its neighbours. * PING 18 MS and JITTER 6.2 MS — reused verbatim from the site's existing chosen Home values (RESUME-WEBSITE.md section 4), which is correct rather than lazy: phase 1 of THIS run measured them, so they are the same readings Home is showing. Straight from the canvas, unchanged: LOSS 0%, "CLOUDFLARE · SYD", "2 OF 4 · ~40 S LEFT", the arc's stroke-dashoffset 88, and the five settled history runs 188 / 241 / 62 (amber) / 255 / 203 with their 34/44/12/47/37px heights. --------------------------------------------------------------------------- DELIBERATE DIVERGENCES from the canvas. All are documented, none are accidents, and each is repeated inline at its own rule. 1. THE PROGRESS TRACK IS HATCHED, NOT PART-FILLED. The canvas (L224) fills it with `animation: pgFill 9s ease-in-out infinite alternate`, whose keyframes walk the width 8% -> 72% -> 64% -> 78% -> 71% and then reverse, forever. That is a fabricated completion fraction: it moves BACKWARDS, it never reaches 100%, and no engine produced any of those numbers. A null progress is not a zero and it is not a guess either, so while a run is in flight with no honest fraction the track is hatched and perfectly still. The genuinely known discrete fact ("2 OF 4") stays in the caption below, where it cannot be misread as a proportion of elapsed work — four phases of unequal duration are not four equal quarters. This is also the divergence the brief explicitly required. To restore the canvas exactly, this is the one rule to change: .pgss-progress in section 5. 2. TIMINGS FOLLOW THE CANVAS WHERE IT AND THE HANDOVER DISAGREE. The canvas authors `pgBreathe 5s` (L190) and `pgDraw 2s` (L195); PINGO-STEEL-HANDOVER section 2's motion summary says "breathe 6s" and "draw 1.7s". The canvas wins because it is the pixel authority (lib/theme/tokens.dart: "Harvested verbatim from the LOCKED design canvas") and because the handover's own list is written as a range summary elsewhere ("pulse 1.6-2.4s", "ring 3-4s", "flowX .8-1s", "marquee 7-9s"). Everything else already sits inside the handover's authored envelope: ring 3.4s is inside 3-4s, and the spinner is exactly the specified 1s indeterminate quadrant. 3. pgBlink IS KEPT. The canvas authors `pgBlink 1s step-end infinite` on the caret beside MEASURING (L201). It is not named in the handover's motion summary, but it is canvas-authored, it sits on a genuinely live element, and the handover's list is a vocabulary menu rather than a closed set (it also lists sweep / flowX / travel / marquee / bar, none of which have any subject on this screen). Dropping an authored animation from a live element would be the opposite error to the one the cardinal rule guards against. 4. STOP IS A DIV, NOT A