Workshop Bicycle Terrain Configurator

Design and implement a high-fidelity responsive product detail experience for RIVET WORKS, a small bicycle workshop selling one adaptable Ridge 42 frameset. The shopper rides weekday pavement and weekend unsealed roads, knows their height, and needs to verify that the complete configuration fits both their body and intended terrain before reserving it. The first viewport must prove one job: changing the terrain visibly reconfigures the bicycle, component specification, fit note, compatibility, and scenario price as one commercial decision.

Compose the product page as a calibrated workshop geometry bench, not a conventional ecommerce gallery. Use a quiet workshop masthead, a three-option terrain rail, one dominant bicycle geometry surface, a linked configuration ledger, and a bottom reserve utility. Avoid a marketing hero, photo carousel, product-card recommendations, review stars, sale badge, countdown, lifestyle photograph, rotating 3D model, rounded feature tiles, or floating discount prompt.

Use this exact demonstrated content: RIVET WORKS; One frame. Set for your ground.; Ridge 42; City; Mixed; Gravel; Configure for gravel; 54 cm frame; 700c × 42 tires; 1×11 drivetrain; Rear rack compatible; Fit note: 173–181 cm; $1,860 scenario price; Reserve configuration; Demo only — no payment.; Compatibility checked. Treat inventory, fit, compatibility, and price as fictional scenario values for the interface. Do not add reviews, discounts, stock scarcity, financing, speed claims, race results, sustainability claims, component endorsements, or guaranteed fit.

Art-direct the bench with enamel #f3f1e8, workshop black #171816, safety orange #ee5b2d, machine blue #315c72, grease gray #777b76, and rule #bfc0b8. Pair an industrial condensed display with a neutral interface sans and tabular mono measurements. Use square geometry, calibrated rules, numbered component connections, precise dimension labels, and restrained workshop contrast. Render the bicycle and geometry in deterministic Canvas paired with a complete semantic component list; do not use a stock product image, external 3D model, SVG bicycle, handmade CSS illustration, or placeholder product panel.

Start with City selected and make Configure for gravel the deterministic five-second preview action. During 0–1.0 seconds Gravel becomes selected and the bench announces that the scenario configuration is being checked. During 1.0–2.6 seconds the fixed frame geometry settles while tires, cockpit, and drivetrain connections redraw to the Gravel specification. During 2.6–4.1 seconds 54 cm frame, 700c × 42 tires, 1×11 drivetrain, Rear rack compatible, and Fit note: 173–181 cm resolve in the ledger. During 4.1–5.0 seconds Compatibility checked and $1,860 scenario price settle, then Reserve configuration becomes available. The sequence must be repeatable, deterministic, and stable at completion.

Support city, mixed, gravel, configuring, component-focused, compatibility-checked, fit-note-open, reserved-locally, unavailable-configuration, Canvas-fallback, visible-focus, reduced-motion, and Save-Data states. Reserve configuration records only a local demo hold and must state that no payment or inventory reservation occurred. Terrain controls must be keyboard operable with clear selected text; each Canvas callout must map to a focusable component row; material changes use a polite live region and never rely on color alone. Put one data-preview-ready marker on the settled root, exactly one data-preview-action marker on Configure for gravel, and set data-preview-action-complete only after the stable final state.

At 960×600, keep terrain selection, complete bicycle geometry, fit and component ledger, scenario price, and reserve action inside the first 16:10 frame. Below 760px, order content as product identity, terrain choices, fit and compatibility facts, action, semantic component list, then simplified Canvas geometry; never require horizontal scrolling and preserve the reserve action at 320px. With prefers-reduced-motion or Save-Data, render the completed Gravel configuration immediately, skip component travel, and keep terrain, component, and reserve controls usable.

Return one complete standalone responsive HTML document with internal CSS and JavaScript. Use no framework, external runtime, network request, live inventory, payment service, stock imagery, placeholder box, SVG or CSS illustration, emoji, lorem ipsum, copyrighted mark, or explanatory prose outside the product. Include one quiet source-prompt link and label all commercial values as scenario or demo data.