@rydr/game-sdk 8.10.0 → 8.12.0

package/dist/ui/rider-rig.js

@@ -0,0 +1,1000 @@
+/**
+ * RIDER RIG — a rider on their trainer, pedalling, with their watts rising out of the machine.
+ *
+ * The one drawing in this kit whose subject is **the bike itself**. Everything else in
+ * `@rydr/game-sdk/ui` teaches the rider about the *pad* — which button, which combination, which
+ * lesson — and a game built from those pieces alone would tell a new player that the controller is
+ * the thing in their hands. It isn't, or not only: the trainer is half of it. This component is the
+ * picture that says so, and it exists to be put on the screens where that has to land — an
+ * onboarding beat, a "how this game works" panel, a store page, the pause screen of a game whose
+ * whole mechanic is effort.
+ *
+ * ```ts
+ * const rig = mountRiderRig(panel, { design: "solid", ftp: session.identity.ftp });
+ *
+ * // each frame:
+ * rig.setPower(session.hardware.current.power);
+ * rig.setCadence(session.hardware.current.cadence);
+ * rig.tick(dt);
+ * ```
+ *
+ * ⚠️ **Not to be confused with {@link mountControlTrainer}**, which lives one folder over in
+ * `./controller/`. English "trainer" means both the *turbo trainer* and the *coach*, and the SDK has
+ * one of each: `mountControlTrainer` is the COACH — a guided lesson that watches the rider perform a
+ * combination. This is the TURBO TRAINER — the physical machine, drawn. They share no code and
+ * answer different questions. If you want to teach a control, you want the other one.
+ *
+ * ## There is no rear wheel, and that is the point
+ *
+ * This is a **direct-drive** trainer, the kind RYDR runs on. The rear wheel comes OFF and the bike's
+ * dropouts bolt straight onto the trainer's own axle, so the chain drives the trainer's cassette
+ * directly — that junction is where the connection to the platform physically happens. Drawing a
+ * wheel-on trainer instead (a tyre pressed onto a spinning roller) would be a picture of a different,
+ * older machine, and would quietly teach a newcomer that the trainer is an accessory the bike sits on
+ * top of rather than a part of the drivetrain.
+ *
+ * It also settles what may move. **The bike is still.** It is bolted to a fixed machine: the frame
+ * does not sway, and the front wheel — parked on the floor, driven by nothing — does not turn. The
+ * only things that rotate are the ones the rider's legs actually drive: the crank, the trainer's
+ * cassette, and its flywheel. A drawing whose frame rocked or whose front wheel spun would be
+ * describing a bike going somewhere, which is the one thing this bike is not doing.
+ *
+ * ## Two engines, deliberately separate
+ *
+ * **Cadence turns the legs. Power fills the gauge.** Nothing crosses over, and that separation is the
+ * entire pedagogical content of the animation:
+ *
+ *   · `setCadence(rpm)` drives the crank, the legs, the cassette and the flywheel. It is the
+ *     *movement*.
+ *   · `setPower(watts)` drives the gauge and the rider's posture — the torso folding down onto the
+ *     bars, and past ~110% FTP a rise out of the saddle. It is the *effort*.
+ *
+ * Driving both from watts would be less code and would teach the opposite of the truth: that a rider
+ * spinning fast against no resistance is doing something. Two riders at 90 rpm, one at 100 W and one
+ * at 300 W, have identical legs and nothing else in common — and which of them the game is reading is
+ * exactly what a newcomer has to understand. So the legs say "you are pedalling" and only the gauge
+ * and the posture say "you are pushing".
+ *
+ * ## The gauge is FTP-relative, and it leaves the machine
+ *
+ * The scale runs `0 → 1.5 × ftp`, so the rider's own threshold sits at two thirds of the way up with
+ * headroom above it for a sprint, and it carries a labelled FTP reference mark. A 150 W rider and a
+ * 350 W rider therefore see the same gauge do the same thing for the same effort — never hard-code a
+ * raw-watt scale (the same rule as {@link createPowerRace}). Zone colours are computed from %FTP and
+ * are **local to this component**: they are deliberately NOT `@rydr/game-sdk/difficulty`'s ramp, which
+ * colours the rider's *chosen calibration level* and would be a different quantity wearing the same
+ * paint.
+ *
+ * It is presented as a **glass tooltip leaving the machine** — a bubble with a pointer into the
+ * trainer's shoulder, the watts printed large at the top and the bar below them. The bar's
+ * orientation drives the shape of the box: a landscape bubble where it fills left → right, a portrait
+ * one where it fills bottom → top. Two reasons, and
+ * neither is decoration. Where the number comes from is part of what the picture says: these watts
+ * are measured by *that* machine, not floating beside the bike. And the bubble is what gives every
+ * label somewhere to live: the number, its unit and the FTP mark all sit INSIDE the glass, so none of
+ * them is ever printed over the frame, the rider or the trainer. The version before it stood a bare
+ * column next to the machine and hung the FTP label off its side, where it landed on the gauge's own
+ * rungs.
+ *
+ * Feed it raw `power`, not `smoothedPower`. It keeps both: the numeric readout shows the true
+ * instantaneous value, while the bar itself follows an internal EMA so it climbs smoothly between the
+ * trainer's sparse (~1–4 Hz) updates. That is the split `HardwareSnapshot.power` documents, resolved
+ * here once so no caller has to hold two numbers.
+ *
+ * ## One geometry, three paints
+ *
+ * `design` picks the look; the skeleton, the joint solving and the timing are shared. Three art
+ * directions because a component this decorative has to sit inside games that look nothing alike:
+ *
+ * Every gauge is a CONTINUOUS fill; what changes is the paint and the tooltip's orientation.
+ *
+ *   · `solid` (default) — flat opaque silhouette; a landscape tooltip with the figure beside the
+ *     title and the bar under both. Most legible; start here.
+ *   · `blueprint` — thin technical linework; a PORTRAIT tooltip whose bar runs vertically and which
+ *     carries NO figure at all, only the title and a tall bar marked at FTP. On that variant the bar
+ *     IS the reading: a rider glancing at a trainer screen reads a fill long before three digits, and
+ *     a number beside it competes with the thing it annotates.
+ *   · `neon` — glowing outline; a landscape tooltip whose fill carries a bright leading edge.
+ *
+ * ## SVG for the drawing, CSS for the tooltip
+ *
+ * The rider, the bike and the trainer are one inline SVG: they are a picture, made of coordinates and
+ * joints. The watts tooltip is an HTML element positioned over it, because it is a box with rows of
+ * text — and that is the kit's own split, the one `controller-map.ts` already makes when it draws its
+ * callout cards in HTML and only the LINES between them in SVG. Boxes are CSS; shapes are SVG.
+ *
+ * The tooltip being CSS is what buys real `backdrop-filter` glass, and it removes a whole class of
+ * bug: its FTP label is placed off one custom property with a -50% translate, so it is centred on its
+ * own tick by construction rather than by a coordinate computed twice.
+ *
+ * Self-contained like the rest of the kit: it injects its own scoped `.rrig-*` stylesheet once into
+ * `<head>`, pulls in no three.js, and reads no global CSS. It also never renders per frame — the SVG
+ * is built once and a driver mutates cached nodes behind a dirty guard, exactly as `pad-svg.ts` does,
+ * so an idle rig costs no DOM writes at 60 Hz.
+ *
+ * ── Sizing contract (same as the rest of the kit) ──────────────────────────────────────────────
+ * Tuned for a trainer screen read from a few feet away while pedalling. Pick a `size` preset; don't
+ * override the `.rrig-*` dimensions or wrap it in `transform: scale()`.
+ * ────────────────────────────────────────────────────────────────────────────────────────────────
+ */
+const STYLE_ID = "rydr-rider-rig-styles";
+const NS = "http://www.w3.org/2000/svg";
+/**
+ * Width presets, in px, and the type unit that goes with each.
+ *
+ * The tooltip is HTML, so its type does not scale with the SVG on its own — and left at a fixed px
+ * size it swamped the drawing at `sm` and looked lost at `lg`. `u` is the em base every tooltip
+ * dimension is expressed against, so a preset scales the box and its contents together. The presets
+ * are the sanctioned sizes; nothing else should be scaling this component (see the sizing contract).
+ */
+const SIZES = {
+    sm: { w: 240, u: 7.5 },
+    md: { w: 330, u: 10 },
+    lg: { w: 440, u: 13 },
+};
+/* ───────────────────────────── geometry ─────────────────────────────
+ * One coordinate space, shared by all three designs, in a 200×200 viewBox.
+ *
+ * Proportioned off the front wheel, which is the only wheel left: wheelbase ≈ 1.55 × wheel diameter,
+ * bottom bracket ≈ 0.79 × wheel radius above the ground, trainer axle level with the front hub. Those
+ * ratios are what make a drawing read as "a bike" before any detail is examined; an earlier pass with
+ * a wheelbase near 2× the diameter looked like a lowrider, and no arm length could reach the bars
+ * from a plausible torso angle.
+ */
+const VB_W = 200;
+const VB_H = 200;
+const GROUND = 178;
+const WHEEL_R = 26;
+/**
+ * The trainer's axle — where the bike's dropouts bolt on, and where a rear wheel would have been.
+ *
+ * Level with the front hub: a direct-drive unit reproduces the rear axle's height, so the bike sits
+ * flat rather than nose-up.
+ */
+const AXLE = { x: 78, y: 152 };
+/** Front hub. Its tyre is on the ground (`y + WHEEL_R === GROUND`), and it never turns. */
+const FRONT = { x: 158, y: 152 };
+/** Bottom bracket — the crank's centre of rotation, and the anchor the whole rider hangs off. */
+const BB = { x: 112, y: 157 };
+const CRANK_R = 15;
+const CHAINRING_R = 8;
+/** The trainer's cassette, on its axle. This is what the chain drives. */
+const CASSETTE_R = 7;
+/** Top of the seat tube, where the seat stay and the top tube meet it. */
+const SEAT_CLUSTER = { x: 101, y: 121 };
+const SADDLE = { x: 96, y: 106 };
+const HEADTUBE_TOP = { x: 144, y: 112 };
+const HEADTUBE_BOT = { x: 148, y: 128 };
+/** Where the hands go. */
+const BAR = { x: 152, y: 108 };
+/** The resistance flywheel, housed inside the trainer body. */
+const FLY = { x: 70, y: 165, r: 12 };
+/** Rider segment lengths, in the same units. */
+const THIGH = 38;
+const SHIN = 40;
+const UPPER_ARM = 25;
+const FOREARM = 25;
+/**
+ * Hip at rest — just above and behind the saddle. Effort lifts it.
+ *
+ * Chosen so the leg is near full extension at the bottom of the stroke and properly folded at the
+ * top, which is what makes the pedalling read as pedalling rather than as a leg waving.
+ */
+const HIP0 = { x: 94, y: 100 };
+/** Shoulder at rest — a moderate road position, ~42° of back angle. Effort folds it down and forward. */
+const SHOULDER0 = { x: 136, y: 62 };
+/**
+ * Where each layout hangs, in percentages of the square viewBox.
+ *
+ * How far along its own bottom edge each layout hangs its pointer. The landscape box is wide, so its
+ * pointer sits well in from the left; the portrait box is narrow and hangs its own nearer the corner.
+ */
+const TIP_ANCHOR = {
+    horizontal: { x: 0.32, y: 0.695, arrow: 6.2 },
+    vertical: { x: 0.325, y: 0.72, arrow: 6.3 },
+};
+/**
+ * The top of the gauge, as a multiple of FTP.
+ *
+ * 1.5 puts threshold at two thirds height: high enough that a rider at FTP reads as "working hard",
+ * with real headroom left so a sprint has somewhere to go. A scale that topped out AT FTP would peg
+ * for most of any actual game.
+ */
+const GAUGE_MAX_FTP_PCT = 1.5;
+/** Where the FTP reference mark lands, as a fraction of the gauge. */
+const FTP_FRAC = 1 / GAUGE_MAX_FTP_PCT;
+/**
+ * Gauge smoothing time constant, seconds. Short — this is here to absorb the trainer's 1–4 Hz update
+ * steps, not to lag behind a real surge, which the rider must see land.
+ */
+const POWER_TAU_S = 0.22;
+/** Cadence is smoothed harder: the legs must never visibly stutter on a sparse update. */
+const CADENCE_TAU_S = 0.45;
+/**
+ * Visual gear-down for the driven parts.
+ *
+ * A trainer's cassette turns several times crank speed and its flywheel faster again — at 90 rpm
+ * that's past the frame rate, where a drawn spoke stops reading as rotation and starts strobing
+ * backwards. So they turn at a fraction of the truth and **motion streaks carry the rest of the
+ * speed**, fading in as cadence rises. A drawing that flickers tells the rider less than an honest
+ * blur.
+ */
+const CASSETTE_GEAR = 1.6;
+const FLY_GEAR = 2.1;
+/** Cadence at which the motion streaks reach full strength. */
+const STREAK_FULL_RPM = 95;
+/**
+ * %FTP zone colours — LOCAL to this component. See the module header on why this is not
+ * `@rydr/game-sdk/difficulty`'s ramp.
+ */
+const ZONES = [
+    { max: 0.55, color: "#6b7f9e", glow: "#9fb4d4" }, // recovery
+    { max: 0.75, color: "#38bdf8", glow: "#7dd3fc" }, // endurance
+    { max: 0.9, color: "#22c55e", glow: "#6ee7a2" }, // tempo
+    { max: 1.05, color: "#eab308", glow: "#fde047" }, // threshold
+    { max: 1.2, color: "#f97316", glow: "#fdba74" }, // vo2
+    { max: Infinity, color: "#ef4444", glow: "#fca5a5" }, // anaerobic
+];
+const zoneFor = (ftpPct) => ZONES.find((z) => ftpPct < z.max);
+const clamp = (v, lo, hi) => (v < lo ? lo : v > hi ? hi : v);
+const lerp = (a, b, t) => a + (b - a) * t;
+const rad = (deg) => (deg * Math.PI) / 180;
+function svgNode(tag, attrs) {
+    const n = document.createElementNS(NS, tag);
+    if (attrs)
+        for (const k in attrs)
+            n.setAttribute(k, String(attrs[k]));
+    return n;
+}
+/** A point on the crank circle. 0° = pedal forward; the angle advances the way the crank turns. */
+function pedalAt(angleDeg) {
+    return { x: BB.x + CRANK_R * Math.cos(rad(angleDeg)), y: BB.y + CRANK_R * Math.sin(rad(angleDeg)) };
+}
+/**
+ * Two-bone IK: given a root, a target, and two segment lengths, find the joint between them.
+ *
+ * `bend` picks which of the two mirror solutions to take — `"forward"` puts the joint on the +x side
+ * of the root→target line (a knee, which tracks ahead of the leg) and `"back"` on the −x side (an
+ * elbow, which drops behind the arm). Out-of-reach targets are clamped rather than returning NaN: a
+ * leg that can't reach straightens instead of vanishing, which is the failure a viewer forgives.
+ */
+function solveJoint(root, target, l1, l2, bend) {
+    const dx = target.x - root.x;
+    const dy = target.y - root.y;
+    const raw = Math.hypot(dx, dy);
+    const d = clamp(raw, Math.abs(l1 - l2) + 0.001, l1 + l2 - 0.001);
+    const ux = raw ? dx / raw : 0;
+    const uy = raw ? dy / raw : 0;
+    const a = (l1 * l1 - l2 * l2 + d * d) / (2 * d);
+    const h = Math.sqrt(Math.max(0, l1 * l1 - a * a));
+    // The two perpendiculars to the root→target direction.
+    const px = -uy;
+    const py = ux;
+    const s = bend === "forward" ? (px >= 0 ? 1 : -1) : px >= 0 ? -1 : 1;
+    return { x: root.x + a * ux + s * h * px, y: root.y + a * uy + s * h * py };
+}
+/** `d` for a circular arc, swept from `a0` to `a1` degrees about a centre. */
+function arcPath(cx, cy, r, a0, a1) {
+    const x0 = cx + r * Math.cos(rad(a0));
+    const y0 = cy + r * Math.sin(rad(a0));
+    const x1 = cx + r * Math.cos(rad(a1));
+    const y1 = cy + r * Math.sin(rad(a1));
+    const large = Math.abs(a1 - a0) > 180 ? 1 : 0;
+    const sweep = a1 > a0 ? 1 : 0;
+    return `M ${x0.toFixed(2)} ${y0.toFixed(2)} A ${r} ${r} 0 ${large} ${sweep} ${x1.toFixed(2)} ${y1.toFixed(2)}`;
+}
+/**
+ * How each design fills the one shared track.
+ *
+ * The track's geometry is common to all three — what differs is how the fill is drawn in it: one
+ * continuous bar, a stack of discrete rungs, or a bar with a bright leading edge. (An earlier pass
+ * gave `neon` a curved arc swept around the flywheel; an arc does not compose inside the bubble, and
+ * the bubble is the better answer to "make the gauge come out of the machine".)
+ */
+const GAUGE_SPEC = {
+    solid: { shape: "bar", orient: "horizontal" },
+    blueprint: { shape: "bar", orient: "vertical" },
+    neon: { shape: "tube", orient: "horizontal" },
+};
+/**
+ * The default renderer: the flat SVG drawing, which is exactly what the component did inline before
+ * the seam existed. Nothing about the flat rig changed.
+ *
+ * It keeps its OWN dirty guards. Skipping a DOM write is the cheap win here, so the guards belong
+ * next to the writes rather than in the component — and a WebGL renderer's idea of "nothing to do" is
+ * a different question entirely (whether to draw a frame at all), which is its business, not ours.
+ *
+ * Seeded to `-Infinity`, NOT `NaN`: every guard is a `Math.abs(next - last) > eps` test, and any
+ * comparison against `NaN` is false, so a `NaN` seed silently suppresses the FIRST paint — and with
+ * it every write that never becomes dirty again.
+ */
+export function createSvgRigRenderer({ design }) {
+    ensureStyles();
+    const n = buildSvg(design);
+    const last = { crank: -Infinity, cassette: -Infinity, fly: -Infinity, streak: -Infinity, pose: -Infinity };
+    const pt = (p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`;
+    return {
+        node: n.svg,
+        // An orthographic side view: the anchor is just its place in the viewBox.
+        anchor: () => ({
+            x: RIG_GEOMETRY.TRAINER_ANCHOR.x / VB_W,
+            y: RIG_GEOMETRY.TRAINER_ANCHOR.y / VB_H,
+        }),
+        setPose(pose) {
+            if (Math.abs(pose.crankAngle - last.crank) > 0.25) {
+                last.crank = pose.crankAngle;
+                n.crank.setAttribute("transform", `rotate(${pose.crankAngle.toFixed(1)} ${BB.x} ${BB.y})`);
+            }
+            if (Math.abs(pose.cassetteAngle - last.cassette) > 0.5) {
+                last.cassette = pose.cassetteAngle;
+                n.cassette.setAttribute("transform", `rotate(${pose.cassetteAngle.toFixed(1)} ${AXLE.x} ${AXLE.y})`);
+            }
+            if (Math.abs(pose.flyAngle - last.fly) > 0.5) {
+                last.fly = pose.flyAngle;
+                n.flySpokes.setAttribute("transform", `rotate(${pose.flyAngle.toFixed(1)} ${FLY.x} ${FLY.y})`);
+            }
+            if (Math.abs(pose.streak - last.streak) > 0.02) {
+                last.streak = pose.streak;
+                n.flyStreaks.setAttribute("opacity", pose.streak.toFixed(2));
+            }
+            // One scalar standing in for the whole body: if none of the joints moved enough to see, none of
+            // the eight writes below are worth making.
+            const moved = pose.hip.x + pose.hip.y + pose.shoulder.x + pose.shoulder.y + pose.kneeNear.x + pose.kneeNear.y;
+            if (Math.abs(moved - last.pose) > 0.15) {
+                last.pose = moved;
+                n.legNear.setAttribute("points", `${pt(pose.hip)} ${pt(pose.kneeNear)} ${pt(pose.pedalNear)}`);
+                n.legFar.setAttribute("points", `${pt(pose.hip)} ${pt(pose.kneeFar)} ${pt(pose.pedalFar)}`);
+                n.armNear.setAttribute("points", `${pt(pose.shoulder)} ${pt(pose.elbow)} ${pt(BAR)}`);
+                n.torso.setAttribute("x1", pose.hip.x.toFixed(1));
+                n.torso.setAttribute("y1", pose.hip.y.toFixed(1));
+                n.torso.setAttribute("x2", pose.shoulder.x.toFixed(1));
+                n.torso.setAttribute("y2", pose.shoulder.y.toFixed(1));
+                n.neck.setAttribute("x1", pose.shoulder.x.toFixed(1));
+                n.neck.setAttribute("y1", pose.shoulder.y.toFixed(1));
+                n.neck.setAttribute("x2", pose.head.x.toFixed(1));
+                n.neck.setAttribute("y2", pose.head.y.toFixed(1));
+                n.head.setAttribute("cx", pose.head.x.toFixed(1));
+                n.head.setAttribute("cy", pose.head.y.toFixed(1));
+            }
+        },
+        dispose() {
+            n.svg.remove();
+        },
+    };
+}
+/**
+ * The drawing space every renderer works in: a 200×200 box with y pointing DOWN and the floor at
+ * `GROUND`. A 3D renderer maps it once (x − 100, GROUND − y) and is done.
+ */
+export const RIG_GEOMETRY = {
+    VB_W,
+    VB_H,
+    GROUND,
+    WHEEL_R,
+    AXLE,
+    FRONT,
+    BB,
+    CRANK_R,
+    CHAINRING_R,
+    CASSETTE_R,
+    SEAT_CLUSTER,
+    SADDLE,
+    HEADTUBE_TOP,
+    HEADTUBE_BOT,
+    BAR,
+    FLY,
+    /** The rider's rest hip and shoulder — a renderer building a skeleton needs the spine's length. */
+    HIP0,
+    SHOULDER0,
+    /**
+     * The point on the trainer the watts tooltip points at — its top face, where the machine is tall
+     * enough for a pointer to meet it. Both renderers answer {@link RigRenderer.anchor} from this.
+     */
+    TRAINER_ANCHOR: { x: 47, y: 157 },
+};
+export function mountRiderRig(host, opts = {}) {
+    ensureStyles();
+    const design = opts.design ?? "solid";
+    const { shape, orient } = GAUGE_SPEC[design];
+    const preset = SIZES[opts.size ?? "md"];
+    const showReadout = opts.readout !== false;
+    let ftp = Math.max(1, opts.ftp ?? 200);
+    let rawPower = 0;
+    let smoothPower = 0;
+    let targetCadence = opts.idleCadence ?? 0;
+    let smoothCadence = targetCadence;
+    let crankAngle = 20;
+    let cassetteAngle = 0;
+    let flyAngle = 0;
+    const reduceMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const root = document.createElement("div");
+    root.className = `rrig rrig--${design}`;
+    root.style.width = `${preset.w}px`;
+    root.style.setProperty("--rrig-u", `${preset.u}px`);
+    const renderer = (opts.renderer ?? createSvgRigRenderer)({ design });
+    root.appendChild(renderer.node);
+    const anchor = renderer.anchor();
+    const n = buildTooltip(root, { shape, orient, showReadout, label: opts.label ?? "WATTS", anchor });
+    let tipOver = { ...opts.tip };
+    placeTip(n.tipRoot, orient, anchor, tipOver);
+    host.appendChild(root);
+    /** Dirty guards for the TOOLTIP. The renderer keeps its own for the drawing. */
+    const last = { frac: -Infinity, zone: "", readout: -Infinity };
+    /** Repaint everything the CURRENT state implies. Cheap: every write is guarded. */
+    function paint() {
+        const effort = smoothPower / ftp;
+        // ── the pose: solved HERE, once, for whatever is drawing ──────────────
+        // Nothing that moves is the bike: it is bolted to a fixed machine. Only the crank and the two
+        // things the chain turns rotate at all — see the module header.
+        //
+        // Out of the saddle past ~105% FTP. Below that the hip is planted: a rider at endurance pace who
+        // bobbed would read as struggling. The RIDER rises and sways; the bike never moves with them.
+        const standing = clamp((effort - 1.05) / 0.35, 0, 1);
+        const surge = Math.sin(rad(crankAngle * 2)) * standing;
+        const fold = clamp(effort, 0, 1.3);
+        const hip = { x: HIP0.x + surge * 1.2, y: HIP0.y - standing * 5 + surge * 1.2 };
+        const shoulder = {
+            x: SHOULDER0.x + fold * 5 + surge * 1,
+            y: SHOULDER0.y + fold * 7 - standing * 4,
+        };
+        const pedalNear = pedalAt(crankAngle);
+        const pedalFar = pedalAt(crankAngle + 180);
+        renderer.setPose({
+            hip,
+            shoulder,
+            // The head tucks toward the bars as the effort rises, riding on the shoulder.
+            head: {
+                x: shoulder.x + lerp(10, 14, clamp(fold, 0, 1)),
+                y: shoulder.y - lerp(12, 6, clamp(fold, 0, 1)),
+            },
+            elbow: solveJoint(shoulder, BAR, UPPER_ARM, FOREARM, "back"),
+            kneeNear: solveJoint(hip, pedalNear, THIGH, SHIN, "forward"),
+            kneeFar: solveJoint(hip, pedalFar, THIGH, SHIN, "forward"),
+            pedalNear,
+            pedalFar,
+            crankAngle,
+            cassetteAngle,
+            flyAngle,
+            // Streaks stand in for the speed the spokes can't show without strobing.
+            streak: clamp(smoothCadence / STREAK_FULL_RPM, 0, 1),
+            effort,
+        });
+        // ── the gauge ─────────────────────────────────────────────────────────
+        const frac = clamp(smoothPower / (ftp * GAUGE_MAX_FTP_PCT), 0, 1);
+        const zone = zoneFor(smoothPower / ftp);
+        if (zone.color !== last.zone) {
+            last.zone = zone.color;
+            n.tipRoot.style.setProperty("--rrig-zone", zone.color);
+            n.tipRoot.style.setProperty("--rrig-zone-glow", zone.glow);
+        }
+        if (Math.abs(frac - last.frac) > 0.002) {
+            last.frac = frac;
+            // One property, whichever way the bar runs: CSS owns the axis.
+            const pct = `${(frac * 100).toFixed(2)}%`;
+            if (orient === "vertical")
+                n.gaugeFill.style.height = pct;
+            else
+                n.gaugeFill.style.width = pct;
+            if (n.tip) {
+                // Hidden at the very start: a leading edge with nothing behind it reads as a stray mark.
+                if (orient === "vertical")
+                    n.tip.style.bottom = pct;
+                else
+                    n.tip.style.left = pct;
+                n.tip.style.opacity = frac > 0.02 ? "1" : "0";
+            }
+        }
+        // The readout carries the RAW number, not the smoothed one — see the module header.
+        if (n.readoutValue) {
+            const shown = Math.round(rawPower);
+            if (shown !== last.readout) {
+                last.readout = shown;
+                n.readoutValue.textContent = String(shown);
+            }
+        }
+    }
+    paint();
+    return {
+        root,
+        setTipPlacement(next) {
+            tipOver = { ...tipOver, ...next };
+            placeTip(n.tipRoot, orient, anchor, tipOver);
+        },
+        setPower(watts) {
+            rawPower = Number.isFinite(watts) ? Math.max(0, watts) : 0;
+        },
+        setCadence(rpm) {
+            targetCadence = Number.isFinite(rpm) ? Math.max(0, rpm) : 0;
+        },
+        setFtp(next) {
+            if (Number.isFinite(next) && next > 0) {
+                ftp = next;
+                last.frac = -Infinity; // force the gauge to re-lay against the new scale
+                last.zone = "";
+                paint();
+            }
+        },
+        tick(dt) {
+            const step = clamp(Number.isFinite(dt) ? dt : 0, 0, 0.1);
+            // Frame-rate-independent EMAs, same shape as HardwareStore's power smoothing.
+            smoothPower += (rawPower - smoothPower) * (1 - Math.exp(-step / POWER_TAU_S));
+            smoothCadence += (targetCadence - smoothCadence) * (1 - Math.exp(-step / CADENCE_TAU_S));
+            if (!reduceMotion) {
+                const revPerS = smoothCadence / 60;
+                crankAngle = (crankAngle + revPerS * 360 * step) % 360;
+                cassetteAngle = (cassetteAngle + revPerS * 360 * CASSETTE_GEAR * step) % 360;
+                flyAngle = (flyAngle + revPerS * 360 * FLY_GEAR * step) % 360;
+            }
+            paint();
+        },
+        dispose() {
+            renderer.dispose();
+            root.remove();
+        },
+    };
+}
+/* ───────────────────────────── the drawing ───────────────────────────── */
+/** The flat drawing. Everything here is the rig itself; the tooltip is built separately. */
+function buildSvg(design) {
+    const svg = svgNode("svg", { viewBox: `0 0 ${VB_W} ${VB_H}`, class: "rrig-svg", role: "img" });
+    svg.setAttribute("aria-label", "A rider pedalling on a direct-drive indoor trainer, with a live watts gauge");
+    svg.classList.add(`rrig-svg--${design}`);
+    // Ground line first — everything else sits on it.
+    svg.appendChild(svgNode("line", { class: "rrig-ground", x1: 8, y1: GROUND, x2: VB_W - 8, y2: GROUND }));
+    /* ── the trainer ──────────────────────────────────────────────────────── */
+    const trainer = svgNode("g", { class: "rrig-trainer" });
+    svg.appendChild(trainer);
+    // The housing: a wedge filling the space the rear wheel used to occupy, peaking at the axle it
+    // carries. Drawn (and filled) BEFORE the flywheel, so the flywheel reads as mounted IN the machine
+    // rather than crossing it — in line art one circle over another says "another wheel", not "behind",
+    // which is the trap an earlier pass fell into.
+    trainer.appendChild(svgNode("path", {
+        class: "rrig-trainer-body",
+        d: `M 34 ${GROUND} L 44 160 L 62 154 L ${AXLE.x} ${AXLE.y - 3} L 90 157 L 96 161 L 104 ${GROUND} Z`,
+    }));
+    trainer.appendChild(svgNode("rect", { class: "rrig-foot", x: 26, y: GROUND - 3, width: 18, height: 4, rx: 2 }));
+    trainer.appendChild(svgNode("rect", { class: "rrig-foot", x: 94, y: GROUND - 3, width: 18, height: 4, rx: 2 }));
+    const flyStreaks = svgNode("g", { class: "rrig-streaks", opacity: 0 });
+    for (let i = 0; i < 2; i++) {
+        flyStreaks.appendChild(svgNode("path", { class: "rrig-streak", d: arcPath(FLY.x, FLY.y, FLY.r - 4 - i * 4, 200 + i * 25, 320 + i * 25) }));
+    }
+    const flySpokes = svgNode("g", { class: "rrig-fly-spokes" });
+    for (let i = 0; i < 6; i++) {
+        const a = rad(i * 60);
+        flySpokes.appendChild(svgNode("line", {
+            class: "rrig-spoke",
+            x1: FLY.x,
+            y1: FLY.y,
+            x2: FLY.x + (FLY.r - 2) * Math.cos(a),
+            y2: FLY.y + (FLY.r - 2) * Math.sin(a),
+        }));
+    }
+    trainer.appendChild(svgNode("circle", { class: "rrig-fly", cx: FLY.x, cy: FLY.y, r: FLY.r }));
+    trainer.appendChild(flySpokes);
+    trainer.appendChild(flyStreaks);
+    trainer.appendChild(svgNode("circle", { class: "rrig-fly-hub", cx: FLY.x, cy: FLY.y, r: 3 }));
+    /* ── the bike ─────────────────────────────────────────────────────────── */
+    const bike = svgNode("g", { class: "rrig-bike" });
+    svg.appendChild(bike);
+    // The front wheel — the only one left, and it does NOT turn: parked on the floor with nothing
+    // driving it. Its spokes go straight into the bike group for exactly that reason; there is no node
+    // cached for them, because nothing will ever rotate them.
+    bike.appendChild(svgNode("circle", { class: "rrig-tyre", cx: FRONT.x, cy: FRONT.y, r: WHEEL_R }));
+    for (let i = 0; i < 8; i++) {
+        const a = rad(i * 45);
+        bike.appendChild(svgNode("line", {
+            class: "rrig-spoke",
+            x1: FRONT.x,
+            y1: FRONT.y,
+            x2: FRONT.x + (WHEEL_R - 3) * Math.cos(a),
+            y2: FRONT.y + (WHEEL_R - 3) * Math.sin(a),
+        }));
+    }
+    bike.appendChild(svgNode("circle", { class: "rrig-hub", cx: FRONT.x, cy: FRONT.y, r: 3 }));
+    // Frame: the double triangle, its rear ending at the TRAINER's axle instead of a rear hub.
+    bike.appendChild(svgNode("path", {
+        class: "rrig-frame",
+        d: `M ${AXLE.x} ${AXLE.y} L ${SEAT_CLUSTER.x} ${SEAT_CLUSTER.y}` + // seat stay
+            ` L ${HEADTUBE_TOP.x} ${HEADTUBE_TOP.y}` + // top tube
+            ` L ${HEADTUBE_BOT.x} ${HEADTUBE_BOT.y}` + // head tube
+            ` L ${BB.x} ${BB.y}` + // down tube
+            ` L ${AXLE.x} ${AXLE.y}` + // chain stay
+            ` M ${SEAT_CLUSTER.x} ${SEAT_CLUSTER.y} L ${BB.x} ${BB.y}` + // seat tube
+            ` M ${SEAT_CLUSTER.x} ${SEAT_CLUSTER.y} L ${SADDLE.x} ${SADDLE.y}`, // seatpost
+    }));
+    bike.appendChild(svgNode("line", { class: "rrig-frame", x1: HEADTUBE_BOT.x, y1: HEADTUBE_BOT.y, x2: FRONT.x, y2: FRONT.y }));
+    bike.appendChild(svgNode("line", { class: "rrig-frame", x1: HEADTUBE_TOP.x, y1: HEADTUBE_TOP.y, x2: BAR.x, y2: BAR.y }));
+    bike.appendChild(svgNode("path", { class: "rrig-saddle", d: `M ${SADDLE.x - 11} ${SADDLE.y + 1} L ${SADDLE.x + 8} ${SADDLE.y}` }));
+    bike.appendChild(svgNode("path", {
+        class: "rrig-bar",
+        d: `M ${BAR.x - 4} ${BAR.y - 5} Q ${BAR.x + 8} ${BAR.y - 5} ${BAR.x + 5} ${BAR.y + 8}`,
+    }));
+    // The chain, running from the chainring back to the TRAINER's cassette — the junction this whole
+    // drawing exists to show.
+    bike.appendChild(svgNode("circle", { class: "rrig-chainring", cx: BB.x, cy: BB.y, r: CHAINRING_R }));
+    bike.appendChild(svgNode("path", {
+        class: "rrig-chain",
+        d: `M ${AXLE.x} ${AXLE.y - CASSETTE_R} L ${BB.x} ${BB.y - CHAINRING_R}` +
+            ` M ${AXLE.x} ${AXLE.y + CASSETTE_R} L ${BB.x} ${BB.y + CHAINRING_R}`,
+    }));
+    // The cassette on the trainer's axle. Driven, so it turns.
+    const cassette = svgNode("g", { class: "rrig-cassette-spin" });
+    bike.appendChild(svgNode("circle", { class: "rrig-cassette", cx: AXLE.x, cy: AXLE.y, r: CASSETTE_R }));
+    for (let i = 0; i < 4; i++) {
+        const a = rad(i * 90);
+        cassette.appendChild(svgNode("line", {
+            class: "rrig-spoke",
+            x1: AXLE.x,
+            y1: AXLE.y,
+            x2: AXLE.x + (CASSETTE_R - 1.5) * Math.cos(a),
+            y2: AXLE.y + (CASSETTE_R - 1.5) * Math.sin(a),
+        }));
+    }
+    bike.appendChild(cassette);
+    bike.appendChild(svgNode("circle", { class: "rrig-hub", cx: AXLE.x, cy: AXLE.y, r: 2.5 }));
+    const crank = svgNode("g", { class: "rrig-crank" });
+    bike.appendChild(crank);
+    crank.appendChild(svgNode("line", { class: "rrig-crank-arm", x1: BB.x - CRANK_R, y1: BB.y, x2: BB.x + CRANK_R, y2: BB.y }));
+    crank.appendChild(svgNode("rect", { class: "rrig-pedal", x: BB.x + CRANK_R - 5, y: BB.y - 1.5, width: 10, height: 3, rx: 1.5 }));
+    crank.appendChild(svgNode("rect", { class: "rrig-pedal", x: BB.x - CRANK_R - 5, y: BB.y - 1.5, width: 10, height: 3, rx: 1.5 }));
+    /* ── the rider ────────────────────────────────────────────────────────── */
+    const rider = svgNode("g", { class: "rrig-rider" });
+    svg.appendChild(rider);
+    // Far side first, so the near limbs read as in front.
+    const legFar = svgNode("polyline", { class: "rrig-limb rrig-limb--far", points: "" });
+    rider.appendChild(legFar);
+    const torso = svgNode("line", { class: "rrig-torso", x1: 0, y1: 0, x2: 0, y2: 0 });
+    rider.appendChild(torso);
+    const armNear = svgNode("polyline", { class: "rrig-limb rrig-limb--arm", points: "" });
+    rider.appendChild(armNear);
+    const neck = svgNode("line", { class: "rrig-neck", x1: 0, y1: 0, x2: 0, y2: 0 });
+    rider.appendChild(neck);
+    const headEl = svgNode("circle", { class: "rrig-head", cx: 0, cy: 0, r: 8.5 });
+    rider.appendChild(headEl);
+    const legNear = svgNode("polyline", { class: "rrig-limb", points: "" });
+    rider.appendChild(legNear);
+    return { svg, crank, cassette, flySpokes, flyStreaks, legNear, legFar, armNear, torso, neck, head: headEl };
+}
+/**
+ * Position the tooltip so the POINTER'S TIP lands on `anchor`, rather than at a fixed percentage of
+ * the box. `arrow + half the arrow's width` is the tip's offset from the tooltip's own left edge, so
+ * subtracting it puts the tip — not the corner — on the machine.
+ *
+ * Clamped to the box: a renderer can report an anchor near the left edge, or an override can push the
+ * pointer offset past the anchor's own inset, and an unclamped subtraction hangs the whole tooltip
+ * outside the drawing. The pointer drifts off the anchor in that corner case, which is much less wrong
+ * than half the panel being cut off.
+ */
+function placeTip(tipRoot, orient, anchor, over) {
+    // Three layers, narrowest first: an explicit override, then the layout's own default, then the
+    // renderer's anchor.
+    const dflt = TIP_ANCHOR[orient];
+    const arrow = over.arrow ?? dflt.arrow;
+    const x = over.x ?? dflt.x ?? anchor.x;
+    const y = over.y ?? dflt.y ?? anchor.y;
+    tipRoot.style.left = `max(0.4em, calc(${(x * 100).toFixed(2)}% - ${(arrow + 1.15).toFixed(2)}em))`;
+    tipRoot.style.bottom = `${((1 - y) * 100).toFixed(2)}%`;
+    tipRoot.style.setProperty("--rrig-arrow", `${arrow}em`);
+}
+/** The tooltip: HTML, positioned over whatever is drawing the rig. */
+function buildTooltip(root, cfg) {
+    const tipRoot = document.createElement("div");
+    tipRoot.className = `rrig-tip rrig-tip--${cfg.orient}`;
+    placeTip(tipRoot, cfg.orient, cfg.anchor, {});
+    // The FTP tick is placed by CSS from this one value, so it and its label cannot drift apart.
+    tipRoot.style.setProperty("--rrig-ftp", `${(FTP_FRAC * 100).toFixed(3)}%`);
+    root.appendChild(tipRoot);
+    /**
+     * The glass box is a CHILD of the wrapper, and the pointer is its SIBLING — not its descendant.
+     *
+     * An element carrying `backdrop-filter` becomes a backdrop root: anything inside it can only
+     * sample its parent's own content, not the page behind. Nesting the pointer in the panel therefore
+     * neutered the pointer's own blur, and once it lost its borders there was nothing left of it but 7%
+     * white — it vanished. As a sibling of the panel it samples the real backdrop and shows up.
+     */
+    const panel = document.createElement("div");
+    panel.className = "rrig-tip-panel";
+    tipRoot.appendChild(panel);
+    // The PORTRAIT variant carries no figure at all — only the title and the bar.
+    //
+    // On that layout the bar is the reading: it is tall, continuous, and marked at FTP, which answers
+    // "how hard am I working" without a number. Printing the watts beside it competes with the thing it
+    // is annotating, and a rider glancing at a trainer screen reads the fill long before they read
+    // three digits. The landscape variants keep the figure, where there is a row for it.
+    let readoutValue;
+    if (cfg.showReadout) {
+        const head = document.createElement("div");
+        head.className = "rrig-tip-head";
+        if (cfg.orient === "horizontal") {
+            readoutValue = document.createElement("span");
+            readoutValue.className = "rrig-tip-num";
+            readoutValue.textContent = "0";
+            head.appendChild(readoutValue);
+        }
+        const unit = document.createElement("span");
+        unit.className = "rrig-tip-unit";
+        unit.textContent = cfg.label;
+        head.appendChild(unit);
+        panel.appendChild(head);
+    }
+    const track = document.createElement("div");
+    track.className = "rrig-tip-track";
+    panel.appendChild(track);
+    const gaugeFill = document.createElement("div");
+    gaugeFill.className = "rrig-tip-fill";
+    track.appendChild(gaugeFill);
+    let tip;
+    if (cfg.shape === "tube") {
+        tip = document.createElement("i");
+        tip.className = "rrig-tip-lead";
+        tip.style.opacity = "0";
+        track.appendChild(tip);
+    }
+    // The FTP reference. Positioned off `--rrig-ftp` with a -50% translate, so the tick and its label
+    // are centred on the same point by construction rather than by two hand-computed coordinates.
+    const ftp = document.createElement("div");
+    ftp.className = "rrig-tip-ftp";
+    ftp.innerHTML = `<i></i><b>FTP</b>`;
+    track.appendChild(ftp);
+    const arrow = document.createElement("div");
+    arrow.className = "rrig-tip-arrow";
+    tipRoot.appendChild(arrow);
+    return { tipRoot, gaugeFill, tip, readoutValue };
+}
+/* ───────────────────────────── styles ─────────────────────────────
+ * One stylesheet, three skins. Every design uses the SAME node structure and the same class names —
+ * what changes is the paint, which is why the geometry above has no idea which design it is drawing.
+ * `--rrig-zone` is set per frame from the %FTP zone and is the only colour that moves.
+ */
+function ensureStyles() {
+    let s = document.getElementById(STYLE_ID);
+    if (!s) {
+        s = document.createElement("style");
+        s.id = STYLE_ID;
+        document.head.appendChild(s);
+    }
+    s.textContent = CSS;
+}
+const CSS = `
+.rrig { display: block; max-width: 100%; position: relative;
+        --rrig-zone: #6b7f9e; --rrig-zone-glow: #9fb4d4; }
+.rrig-svg { display: block; width: 100%; height: auto; overflow: visible; }
+.rrig-svg * { vector-effect: non-scaling-stroke; }
+
+/* ── the tooltip ──────────────────────────────────────────────────────────────────────────
+   Real glass: the backdrop is actually blurred, which is the whole reason this box is HTML and not
+   part of the drawing. The inset highlight on the top edge and the drop below it are what give it
+   thickness — a flat translucent panel reads as a grey rectangle.
+
+   Type is in px on purpose: it must NOT shrink with the drawing's size preset. A watts readout on a
+   trainer screen has one correct physical size.
+
+   NOTE: no backticks anywhere in this stylesheet — it is a template literal, and one in a comment
+   closes it. That has now cost two debugging rounds. */
+/* The wrapper only positions. It must carry NO backdrop-filter of its own — see the note in build()
+   on why that would blind the pointer. */
+.rrig-tip { position: absolute; z-index: 1; pointer-events: none;
+            font-size: var(--rrig-u, 10px);
+            font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
+.rrig-tip { --rrig-edge: rgba(255,255,255,0.16); }
+/* Depth. Three cues, and the middle one does most of the work:
+     · a heavy, soft drop shadow cast onto the artwork below;
+     · a brightness(0.62) in the backdrop filter, which DARKENS whatever the panel covers — smoked
+       glass. Blur alone says "translucent"; blur plus a drop in brightness says "a pane in front of
+       the scene", because the bike visibly dims where the panel crosses it;
+     · a hairline of near-black just outside the light border, which detaches the box from the
+       linework it sits on so the two frames never merge. */
+.rrig-tip-panel { box-sizing: border-box;
+            padding: 0.9em 1.1em 1.9em;
+            border-radius: 1.3em;
+            background: rgba(255,255,255,0.05);
+            border: 1px solid var(--rrig-edge);
+            box-shadow: 0 0 0 1px rgba(0,0,0,0.45),
+                        0 1.6em 3.4em rgba(0,0,0,0.62), 0 0.5em 1.1em rgba(0,0,0,0.45),
+                        inset 0 1px 0 rgba(255,255,255,0.34);
+            backdrop-filter: blur(14px) saturate(1.3) brightness(0.62);
+            -webkit-backdrop-filter: blur(14px) saturate(1.3) brightness(0.62);
+            display: flex; flex-direction: column; gap: 0.65em; }
+
+/* The pointer: a REAL triangle, clipped, with no border of its own, sitting ON TOP of the bubble's
+   bottom edge and overlapping it by a pixel.
+   
+   It was a rotated bordered square before, tucked behind the body. That is the common recipe and it
+   looked wrong here for two reasons: a rotated square's two bordered sides meet at a hard 90° corner
+   rather than a point, and the bubble's own bottom border ran straight across its base — so it read
+   as a small bordered square balanced on a corner rather than as a pointer. Clipping a triangle
+   removes the corner, dropping its border removes the second frame, and putting it in front lets its
+   fill cover the bubble's bottom border across its width, which is the seam. It keeps its own
+   backdrop-filter: without one it is a flat patch hanging off a blurred box. */
+.rrig-tip-arrow { position: absolute; width: 2.3em; height: 1.15em;
+                  left: var(--rrig-arrow); bottom: calc(-1.15em + 1px);
+                  /* Filled with the panel's own EDGE colour: with no border of its own, the fill is
+                     the only thing that draws it, and matching the frame makes it read as the frame
+                     turning a corner rather than as a separate translucent wedge. */
+                  background: var(--rrig-edge);
+                  backdrop-filter: blur(14px) saturate(1.3) brightness(0.62);
+                  -webkit-backdrop-filter: blur(14px) saturate(1.3) brightness(0.62);
+                  clip-path: polygon(0 0, 100% 0, 50% 100%);
+                  z-index: 1; }
+
+.rrig-tip-head { display: flex; align-items: baseline; gap: 0.5em; line-height: 1; }
+.rrig-tip-num { font-size: 2.3em; font-weight: 800; letter-spacing: -0.02em;
+                font-variant-numeric: tabular-nums; color: var(--rrig-zone);
+                transition: color 240ms ease; }
+.rrig-tip-unit { font-size: 1.35em; font-weight: 800; letter-spacing: 0.13em; color: #a7b6cd; }
+/* Portrait stacks, and inverts the hierarchy: WATTS is the title and the figure sits under it at a
+   modest size. On this variant the GAUGE is the reading — the exact number is a detail, and a 2.3em
+   figure made it shout over the bar it is meant to annotate. (column-reverse on a [number, unit] DOM
+   order puts the caption on top without reordering the markup.) Side by side the pair would also
+   set the bubble's width from the text rather than from the bar, and the point of the portrait box is
+   to be narrow. */
+.rrig-tip--vertical .rrig-tip-panel > .rrig-tip-head { flex-direction: column-reverse; align-items: center; gap: 0.15em; }
+.rrig-tip--vertical .rrig-tip-num { font-size: 1.55em; font-weight: 700; }
+.rrig-tip--vertical .rrig-tip-unit { font-size: 1.7em; letter-spacing: 0.14em; }
+
+/* The well is a translucent WHITE, not black.
+   Black was the instinct — a recessed groove — but the panel behind it is already dark glass, so a
+   black well simply vanished into it: the empty part of the gauge had no edge and the fill had nothing
+   to be read against. A light wash gives the track its own body, and the inset shadow along the top
+   plus the hairline rim are what still make it read as recessed rather than raised. */
+.rrig-tip-track { position: relative; border-radius: 99px;
+                  background: rgba(255,255,255,0.13);
+                  box-shadow: inset 0 1px 2.5px rgba(0,0,0,0.55),
+                              inset 0 0 0 1px rgba(255,255,255,0.13); }
+.rrig-tip--horizontal .rrig-tip-track { width: 8.4em; height: 0.9em; }
+/* Portrait: a deliberately BIG bar. With no figure beside it, it has to carry the reading on its own,
+   and the extra height is what makes a change of a few percent visible at a glance. It is nudged off
+   centre so the bar and its FTP label sit optically centred as a pair, rather than the bar alone. */
+.rrig-tip--vertical   .rrig-tip-track { width: 1.75em; height: 13em;
+                                        align-self: flex-start; margin-left: 0.7em; }
+
+/* continuous fill */
+.rrig-tip-fill { position: absolute; border-radius: 99px; background: var(--rrig-zone);
+                 transition: width 90ms linear, height 90ms linear; }
+.rrig-tip--horizontal .rrig-tip-fill { left: 0; top: 0; height: 100%; width: 0; }
+.rrig-tip--vertical   .rrig-tip-fill { left: 0; bottom: 0; width: 100%; height: 0; }
+
+/* the tube's bright leading edge */
+.rrig-tip-lead { position: absolute; background: #fff; border-radius: 0.2em;
+                 box-shadow: 0 0 0.7em var(--rrig-zone-glow), 0 0 0.2em #fff;
+                 transition: left 90ms linear, bottom 90ms linear, opacity 120ms ease; }
+.rrig-tip--horizontal .rrig-tip-lead { top: -1px; width: 0.3em; height: calc(100% + 2px);
+                                       margin-left: -0.15em; }
+.rrig-tip--vertical   .rrig-tip-lead { left: -1px; height: 0.3em; width: calc(100% + 2px);
+                                       margin-bottom: -0.15em; }
+
+/* The FTP reference. One custom property places BOTH the tick and its label, each centred on it by a
+   -50% translate — which is why they can no longer drift apart or land on anything else. The label
+   goes BELOW the bar in landscape (above it, it collided with the unit caption) and beside it in
+   portrait; the bubble's extra bottom padding is the room it needs. */
+.rrig-tip-ftp { position: absolute; }
+/* Dashed, so it reads as a reference line rather than as part of the fill it crosses. */
+.rrig-tip-ftp i { position: absolute; }
+.rrig-tip--horizontal .rrig-tip-ftp i { border-left: 2px dashed rgba(255,255,255,0.65); }
+.rrig-tip--vertical   .rrig-tip-ftp i { border-top: 2px dashed rgba(255,255,255,0.65); }
+/* White, and NOT per-design: it labels the one fixed reference on the gauge, so it should read the
+   same on all three rather than tinting with the art direction like the unit caption does. */
+.rrig-tip-ftp b { position: absolute; font-size: 1.2em; font-weight: 800; letter-spacing: 0.08em;
+                  color: #ffffff; white-space: nowrap; line-height: 1; }
+.rrig-tip--horizontal .rrig-tip-ftp { left: var(--rrig-ftp); top: 0; height: 100%; }
+.rrig-tip--horizontal .rrig-tip-ftp i { left: -1px; top: -0.35em; width: 0; height: calc(100% + 0.7em); }
+.rrig-tip--horizontal .rrig-tip-ftp b { top: calc(100% + 0.85em); left: 50%; transform: translateX(-50%); }
+.rrig-tip--vertical   .rrig-tip-ftp { bottom: var(--rrig-ftp); left: 0; width: 100%; }
+.rrig-tip--vertical   .rrig-tip-ftp i { top: -1px; left: -0.4em; height: 0; width: calc(100% + 0.8em); }
+.rrig-tip--vertical   .rrig-tip-ftp b { left: calc(100% + 1.1em); top: 50%; transform: translateY(-50%); }
+/* Portrait needs no bottom gutter: its label sits beside the bar, not under it. */
+.rrig-tip--vertical .rrig-tip-panel { padding: 1em 1.2em 1.3em; min-width: 10em; }
+
+/* Without a backdrop filter the 6% wash is nearly invisible and the readout loses its ground, so the
+   panel falls back to an opaque dark fill. Checked on the arrow too — it inherits nothing. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .rrig-tip-panel { background: rgba(13,18,28,0.92); }
+  .rrig-tip-arrow { background: rgba(21,28,42,0.95); }
+}
+
+/* ── shared skeleton defaults — the designs override the paint, never the shapes ─────────── */
+.rrig-tyre, .rrig-fly, .rrig-cassette, .rrig-chainring { fill: none; }
+.rrig-frame, .rrig-chain, .rrig-saddle, .rrig-bar, .rrig-crank-arm,
+.rrig-limb, .rrig-torso, .rrig-neck, .rrig-spoke, .rrig-streak { fill: none; }
+.rrig-limb, .rrig-torso, .rrig-neck { stroke-linecap: round; stroke-linejoin: round; }
+.rrig-streak { stroke-linecap: round; }
+.rrig-ground { stroke-linecap: round; }
+
+/* ── SOLID: flat opaque silhouette. The default, and the most legible at distance. ───────── */
+.rrig--solid .rrig-ground { stroke: #263247; stroke-width: 2; }
+.rrig--solid .rrig-tyre { stroke: #39445c; stroke-width: 5; }
+.rrig--solid .rrig-spoke { stroke: #232c3d; stroke-width: 1.2; }
+.rrig--solid .rrig-hub { fill: #6d7f9c; }
+.rrig--solid .rrig-streak { stroke: #93a6c9; stroke-width: 2.5; }
+.rrig--solid .rrig-frame { stroke: #8ea3c4; stroke-width: 4; stroke-linejoin: round; }
+.rrig--solid .rrig-chain { stroke: #55637e; stroke-width: 1.8; }
+.rrig--solid .rrig-chainring { stroke: #6d7f9c; stroke-width: 2; }
+.rrig--solid .rrig-cassette { stroke: #93a6c9; stroke-width: 3; }
+.rrig--solid .rrig-saddle { stroke: #cdd9ec; stroke-width: 5; stroke-linecap: round; }
+.rrig--solid .rrig-bar { stroke: #cdd9ec; stroke-width: 4; stroke-linecap: round; }
+.rrig--solid .rrig-crank-arm { stroke: #b9c7de; stroke-width: 3; }
+.rrig--solid .rrig-pedal { fill: #e6edf9; }
+.rrig--solid .rrig-trainer-body { fill: #2b374e; stroke: #4a5a79; stroke-width: 2; }
+.rrig--solid .rrig-foot { fill: #4a5a79; }
+.rrig--solid .rrig-fly { stroke: #566b90; stroke-width: 4; fill: #1b2434; }
+.rrig--solid .rrig-fly-hub { fill: #7c8fb3; }
+.rrig--solid .rrig-limb { stroke: #f0b429; stroke-width: 8; }
+.rrig--solid .rrig-limb--far { stroke: #a8791b; stroke-width: 7; }
+.rrig--solid .rrig-limb--arm { stroke: #ff7a45; stroke-width: 7; }
+.rrig--solid .rrig-torso { stroke: #ff7a45; stroke-width: 15; stroke-linecap: round; }
+.rrig--solid .rrig-neck { stroke: #f0b429; stroke-width: 7; }
+.rrig--solid .rrig-head { fill: #ffd9a8; stroke: #ff7a45; stroke-width: 3; }
+
+/* ── BLUEPRINT: thin technical linework. An instrument, not a picture. ───────────────────── */
+.rrig--blueprint .rrig-ground { stroke: #1d3a4d; stroke-width: 1; stroke-dasharray: 4 4; }
+.rrig--blueprint .rrig-tyre { stroke: #3f7f9c; stroke-width: 1.4; }
+.rrig--blueprint .rrig-spoke { stroke: #2b5f77; stroke-width: 0.7; }
+.rrig--blueprint .rrig-hub { fill: none; stroke: #4fa3c7; stroke-width: 1.2; }
+.rrig--blueprint .rrig-streak { stroke: #4fa3c7; stroke-width: 1; }
+.rrig--blueprint .rrig-frame { stroke: #7fd4f0; stroke-width: 1.4; }
+.rrig--blueprint .rrig-chain { stroke: #2b5f77; stroke-width: 0.8; stroke-dasharray: 2 2; }
+.rrig--blueprint .rrig-chainring { stroke: #4fa3c7; stroke-width: 1; }
+.rrig--blueprint .rrig-cassette { stroke: #7fd4f0; stroke-width: 1.2; }
+.rrig--blueprint .rrig-saddle { stroke: #a9e6fa; stroke-width: 1.8; stroke-linecap: round; }
+.rrig--blueprint .rrig-bar { stroke: #a9e6fa; stroke-width: 1.6; stroke-linecap: round; }
+.rrig--blueprint .rrig-crank-arm { stroke: #a9e6fa; stroke-width: 1.4; }
+.rrig--blueprint .rrig-pedal { fill: none; stroke: #a9e6fa; stroke-width: 1.2; }
+.rrig--blueprint .rrig-trainer-body { fill: #0d2430; stroke: #3f7f9c; stroke-width: 1.2; }
+.rrig--blueprint .rrig-foot { fill: none; stroke: #3f7f9c; stroke-width: 1; }
+.rrig--blueprint .rrig-fly { stroke: #7fd4f0; stroke-width: 1.2; fill: none; }
+.rrig--blueprint .rrig-fly-hub { fill: none; stroke: #4fa3c7; stroke-width: 1; }
+/* The rider is the SUBJECT: in a palette this uniform they must out-weigh the machine, or the
+   drawing becomes one undifferentiated wireframe and you can no longer see a person in it. */
+.rrig--blueprint .rrig-limb { stroke: #fef9c3; stroke-width: 3; }
+.rrig--blueprint .rrig-limb--far { stroke: #8a7f4a; stroke-width: 2.2; }
+.rrig--blueprint .rrig-limb--arm { stroke: #fff; stroke-width: 2.6; }
+.rrig--blueprint .rrig-torso { stroke: #fff; stroke-width: 4; }
+.rrig--blueprint .rrig-neck { stroke: #fef9c3; stroke-width: 2.4; }
+.rrig--blueprint .rrig-head { fill: #0d2430; stroke: #fff; stroke-width: 2.4; }
+.rrig--blueprint .rrig-tip { --rrig-edge: rgba(127,212,240,0.42); }
+
+.rrig--blueprint .rrig-tip-unit { color: #6fbdda; }
+
+/* ── NEON: glowing outline on dark. The arcade one. ──────────────────────────────────────── */
+.rrig--neon .rrig-ground { stroke: #3b1d5e; stroke-width: 2; }
+.rrig--neon .rrig-tyre { stroke: #c026d3; stroke-width: 2.5; filter: drop-shadow(0 0 4px #e879f9); }
+.rrig--neon .rrig-spoke { stroke: #7e22ce; stroke-width: 1; }
+.rrig--neon .rrig-hub { fill: #f0abfc; }
+.rrig--neon .rrig-streak { stroke: #f0abfc; stroke-width: 2; }
+.rrig--neon .rrig-frame { stroke: #22d3ee; stroke-width: 2.5; filter: drop-shadow(0 0 5px #67e8f9); }
+.rrig--neon .rrig-chain { stroke: #6d28d9; stroke-width: 1.6; }
+.rrig--neon .rrig-chainring { stroke: #22d3ee; stroke-width: 1.6; }
+.rrig--neon .rrig-cassette { stroke: #e879f9; stroke-width: 2; filter: drop-shadow(0 0 4px #f0abfc); }
+.rrig--neon .rrig-saddle { stroke: #a5f3fc; stroke-width: 3; stroke-linecap: round; }
+.rrig--neon .rrig-bar { stroke: #a5f3fc; stroke-width: 2.5; stroke-linecap: round; }
+.rrig--neon .rrig-crank-arm { stroke: #a5f3fc; stroke-width: 2; }
+.rrig--neon .rrig-pedal { fill: #ecfeff; }
+.rrig--neon .rrig-trainer-body { fill: #16082b; stroke: #7e22ce; stroke-width: 2; }
+.rrig--neon .rrig-foot { fill: #7e22ce; }
+.rrig--neon .rrig-fly { stroke: #c026d3; stroke-width: 2.5; fill: #16082b;
+                        filter: drop-shadow(0 0 5px #e879f9); }
+.rrig--neon .rrig-fly-hub { fill: #f0abfc; }
+.rrig--neon .rrig-limb { stroke: #fde047; stroke-width: 3; filter: drop-shadow(0 0 4px #facc15); }
+.rrig--neon .rrig-limb--far { stroke: #a16207; stroke-width: 2.5; filter: none; }
+.rrig--neon .rrig-limb--arm { stroke: #fb7185; stroke-width: 2.5;
+                              filter: drop-shadow(0 0 4px #fda4af); }
+.rrig--neon .rrig-torso { stroke: #fb7185; stroke-width: 4.5; filter: drop-shadow(0 0 5px #fda4af); }
+.rrig--neon .rrig-neck { stroke: #fde047; stroke-width: 2.5; }
+.rrig--neon .rrig-head { fill: none; stroke: #fda4af; stroke-width: 2.5;
+                         filter: drop-shadow(0 0 4px #fb7185); }
+.rrig--neon .rrig-tip { --rrig-edge: rgba(216,180,254,0.44); }
+.rrig--neon .rrig-tip-panel { box-shadow: 0 0 0 1px rgba(0,0,0,0.45),
+                                          0 1.6em 3.4em rgba(0,0,0,0.62), 0 0.5em 1.1em rgba(0,0,0,0.45),
+                                          0 0 2em rgba(192,38,211,0.26),
+                                          inset 0 1px 0 rgba(240,171,252,0.45); }
+
+.rrig--neon .rrig-tip-num { text-shadow: 0 0 12px var(--rrig-zone-glow); }
+.rrig--neon .rrig-tip-fill { box-shadow: 0 0 8px var(--rrig-zone-glow); }
+.rrig--neon .rrig-tip-unit { color: #c4b5fd; }
+
+@media (prefers-reduced-motion: reduce) {
+  .rrig-tip-fill, .rrig-tip-lead, .rrig-tip-num { transition: none; }
+  .rrig-streaks { opacity: 0 !important; }
+}
+`;
+//# sourceMappingURL=rider-rig.js.map