Doubao Seed API for Reasoning and Coding

Build a complete single-file HTML page — one .html document with all CSS and JavaScript inlined, zero external dependencies, no CDN links, no web fonts, no image files or data URIs. Every visual must be drawn procedurally at runtime with the Canvas 2D API or inline SVG; there must be no bitmaps, photographs, or emoji anywhere. The page is a real-time generative canvas titled something like "Harvest Field — Aerial Geometry Studio," and the entire concept is a god's-eye, top-down view of a cultivated farmland that the user shapes with sliders while a single pixelated combine harvester crawls across it, wiping ordered stripes out of raw crop — the quiet, satisfying moment of order being cut from chaos. Composition and rendering: fill the whole viewport with a regular rectangular grid of rye-like field plots laid out in flat-vector shapes with a subtle isometric / faux-2.5D lift, so each plot reads as a low block, not a flat rectangle. Light the scene as a single directional dusk sun raking in from one corner (warm, low-angle); every plot and the harvester must cast a long soft shadow in the opposite direction to reinforce the geometric, blocky solidity of the field. The palette is a restrained, tasteful earth-tone family: mustard yellow, ochre, olive green, and a single accent of scorched tilled burnt-umber for freshly turned soil — no neon, no pure primaries, keep it high-end and muted. Overall style is flat vector meets isometric micro-relief, precise and architectural. The living behavior: within each plot, render fine drill-seeding rows (thin parallel lines) whose density is adjustable. One pixelated combine harvester — a small blocky sprite drawn from a few rectangles — is the ONLY moving element and the only thing that breaks the grid's symmetry. It advances slowly along either a spiral inward path or a serpentine boustrophedon (回字 / back-and-forth) route across the plots. As it moves it must "erase" the standing crop directly in its swath and leave behind real-time harvest stripes — alternating light and dark cut bands, like a mown lawn or a real combine's header trail — permanently painted onto the field until reset. The harvest is a continuous, self-running animation via requestAnimationFrame; watching it fill the field should feel calm and hypnotic. Interactivity — all controls are sliders (plus a couple of small toggles/buttons) in a clean, minimal side or bottom panel, and every one must respond live without a page reload: a slider for number of field plots (grid resolution, e.g. 3×3 up to 12×12), a slider for drill-seeding row density, a slider for crop hue (shifting the standing crop across the mustard-ochre-olive range), a slider for harvest progress or harvester speed, and a toggle to switch the harvester's path between spiral and boustrophedon. Provide a subtle Reset/Replant button that regenerates the field and restarts the pass. Changing plot count or density should regenerate the layout smoothly; dragging hue should retint in real time. Make it fully responsive so the grid and shadows recompute on window resize, keep the frame rate smooth, and ensure the code is clean and self-contained so it opens correctly by double-clicking the file. This is neither a game nor a dashboard — it is a generative art instrument. Push the procedural geometry, the path animation, and the parameter linkage as far as they go; the quality of the isometric shading, the long dusk shadows, and the crispness of the harvest stripes are what should make this render stand out.

Build a single self-contained HTML file (inline CSS and JavaScript only — absolutely no external libraries, CDNs, frameworks, fonts, or image URLs) that renders an interactive, physically-plausible mechanical pocket-watch movement teardown bench, drawn entirely with SVG and/or Canvas. The page must open and run correctly by double-clicking it in any modern browser, with everything computed and animated in real time. THE SCENE. A top-down view of an exploded brass watch movement laid out on a workshop bench. Render, as living vector art, a mainspring barrel, a stacked gear train (barrel wheel → center wheel → third wheel → fourth wheel → escape wheel), a pallet fork that rocks back and forth, a balance wheel with a spiraling hairspring, and hour/minute/second hands sweeping over a subtle chapter ring. Draw real gear teeth (involute-style flanks, not plain circles), correct meshing at the pitch circles, and visible arbors, jewels, bridges, and screws. The whole assembly is composed concentrically around the movement core; the control panel is tucked into a dark corner. THE MECHANICS (this is the point — make it truly simulate, not fake). Model the gear train with real gear ratios: each wheel's angular velocity equals its neighbor's times the negative ratio of their tooth counts, so meshing wheels visibly counter-rotate at proportional speeds and teeth interlock without overlapping or sliding. The escapement must actually tick: the escape wheel advances one tooth at a time in discrete steps, locked and released by the oscillating pallet fork, which is driven by the balance wheel swinging at a fixed beat. Each release ("tick") produces a crisp step in the escape wheel and an audible tick using the Web Audio API (synthesized, no audio files). The seconds hand advances in beat with the escapement; minute and hour hands derive from it through the gear ratios. Drive the animation with requestAnimationFrame and real elapsed time so timing stays accurate. THE INTERACTIONS (all must respond live). - A draggable winding crown/knob: drag it (mouse or touch) to wind the mainspring — a wind-up gauge fills and the spring coil visibly tightens. Release to let stored energy discharge, powering the train; the movement runs until the spring unwinds, then coasts to a stop. - A "rate" slider that scales the beat/running speed so you can watch it tick slowly or race. - An "explode" slider that continuously separates the stacked components along their axes from fully assembled to a fanned-out exploded diagram, with smooth interpolation, connector guide-lines between separated parts, and everything still rotating correctly at any explosion level. - Hover (or tap) any component to act like a jeweler's loupe: highlight that part, dim the rest, and float a labeled callout with the part's name and a one-line function description. - Buttons: Wind, Release, Reset. THE LOOK. Realistic watchmaking-workshop industrial aesthetic: warm aged brass, distressed steel-grey, deep ink-black background, crisp metallic highlights, finely etched gear teeth and beveled bridges. Simulate a single shaft of window light raking in from the upper-left across the bench so parts cast soft elongated shadows, and let specular highlights travel along the gear faces as they turn. Use gradients, filters, and subtle grain for depth. Clean, legible HUD-style controls and labels in the dark corner. REQUIREMENTS. Everything in one .html file; responsive layout that scales to the viewport; smooth 60fps animation; no placeholder graphics — the movement must be procedurally drawn and genuinely mechanically coupled so that a capable model produces a watch that really winds, meshes, and ticks, while a weak one collapses into static spinning circles. Add brief inline comments naming the gear ratios and the escapement logic.