Orbit

The exact prompt

A. DELIVERABLE AND VISUAL DIRECTION
Build exactly one dependency-free index.html with inline CSS and JavaScript, no external requests, libraries, fonts, images, media, or build step. The document is titled "ORBIT | Interactive Gravity Sandbox" and uses lang="en" and a responsive viewport meta tag. It is a polished scientific instrument named ORBIT, not a marketing landing page. Use a deep-space background (#05070a to #0d1114), off-white text (#edf0e9), muted gray-green secondary text, fine borders, and exactly one warm amber accent (#e7ad56). Use system sans-serif and monospace stacks. The canvas spans the full available width and is never narrower than 90vw. Fine low-alpha orbital trails, tiny deterministic background stars, dashed orbit guides, an amber central star, off-white bodies, and an amber drag vector form the scene. Include one compact dark instrumentation panel overlapping the canvas at desktop and stacking below it at tablet and phone widths. No horizontal overflow is allowed. Use exactly one h1 and semantic header, nav, main, and footer elements. Do not use em dash characters in visible copy, console output, or nonfunctional decorative controls.

B. PAGE COMPOSITION
The header contains the ORBIT / LAB 01 home link and a nav with working anchors to Sandbox, Controls, and Field notes. The intro has an amber eyebrow, the sole h1 "ORBIT", and concise instructions explaining that bodies are placed and launched by dragging. The full-width canvas section has a live or paused status label, a drag instruction, and a small technical coordinate readout. The instrumentation aside contains three live outputs for body count, elapsed simulation time, and collision count; labeled range controls for Gravity, Time scale, Trail length, and New body mass; Pause or Resume, Step, Reset, and Add Body buttons; and Stable Orbit, Binary System, and Chaos preset buttons with aria-pressed state. Include a reduced-motion status note and a visually hidden polite live region. Below the canvas, briefly describe the 1/120 second fixed timestep and 24-body limit. The footer contains a short research-unit credit and a working return-to-top link. Every control is keyboard focusable and has a visible amber focus ring.

C. RESPONSIVE LAYOUT
Use a centered content wrapper only for the header, intro, notes, and footer, never for the canvas. Desktop canvas height is clamp(540px, 66vh, 690px), with the 304px panel positioned 16px from the top and right and internally scrollable if necessary. At 900px and below, stack the panel beneath the canvas, make it full width, use two parameter columns and four transport columns where space permits, and set the canvas height to clamp(400px, 58vh, 580px). At 560px and below, use a 420px canvas, one parameter column, two transport columns, compact navigation, and stacked notes and footer content. All grids use minmax(0, 1fr) where needed, all inputs and buttons stay within their containers, and body overflow-x remains hidden as a guard rather than as a substitute for fitting content.

D. PHYSICS AND RENDERING
Use a 2D canvas with a backing store scaled by devicePixelRatio capped at 2 and a CSS-coordinate drawing transform. Cache dimensions on resize, translate existing bodies and trails by the center delta, and deterministically regenerate 70 to 220 tiny background stars. Cap the system at 24 bodies. Keep a fixed central star of mass 2400 and radius 17 at the canvas center. Use G=70, a fixed DT=1/120, semi-implicit Euler integration, distance softening, gravitational attraction from the star, and pairwise mutual gravity between bodies. The Gravity range is 0.2 to 3 with step 0.05 and default 1; Time scale is 0.25 to 2.5 with step 0.25 and default 1; Trail length is 0 to 160 points with step 10 and default 90; New body mass is 1 to 12 with step 0.5 and default 3. Time scale changes accumulator growth rather than the fixed physics step. Clamp real frame delta to 0.05 seconds, allow at most 16 catch-up steps, and discard excess accumulated time after that cap. Store each trail as a capped flat x,y array and render it as a fine translucent path with a brighter latest segment. Remove bodies that collide with the star or travel far outside the field. Merge body-body collisions with conserved mass and momentum, reset the merged trail, and increment the collision count once per merge or star impact.

E. PRESETS AND INTERACTION
Stable Orbit creates three bodies at 0.18, 0.30, and 0.41 of the smaller canvas dimension, with circular tangential velocities and distinct phases. Binary System creates two mass-12 bodies separated around a shared circular orbit, with opposing local velocities for their mutual orbit. Chaos creates seven deterministically positioned bodies with varied radii, masses, speeds, and one retrograde trajectory. Selecting a preset resets bodies, time, collisions, and the accumulator. Reset reloads the currently selected preset without changing parameters.

Pointer down records the launch position and captures the pointer. Pointer move draws a translucent body preview and dashed amber release vector. Pointer up creates one body at the initial point with velocity equal to the drag delta multiplied by 1.25. Pointer cancel discards the preview. Touch must work through pointer events and touch-action:none. Add Body is the keyboard-accessible alternative: it inserts a body of the selected mass at a deterministic phase and radius with circular tangential velocity. Announce successful additions and the 24-body limit. Disable Add Body at the limit. Space toggles pause, Period steps once, and N adds a body when focus is not inside an input, button, or link. Native buttons and ranges must remain fully usable by keyboard.

F. PLAYBACK, REDUCED MOTION, AND TELEMETRY
At script start, before other application code, assign window.__DEMO__ = { name: 'orbit', ready: false, frames: 0, effects: ['fixed-step-gravity', 'drag-release-velocity', 'fine-orbital-trails'], errors: [] }. Install error and unhandledrejection listeners that append strings to errors without logging. Set ready=true in a nested requestAnimationFrame callback after the initial render and first paint. In normal mode run a continuous requestAnimationFrame loop that increments frames on every callback, advances physics only while unpaused, visibly repaints the moving system, and updates DOM statistics every six frames. Pause stops physics but keeps the normal-mode render loop alive. Step always simulates exactly one DT and repaints even while paused.

Read prefers-reduced-motion at startup. When it matches, start paused, render a complete static scene, set ready after first paint, and do not start the continuous loop. Step remains available and advances one fixed timestep. Resume is an explicit user override that starts the loop. If the media query changes to reduced, pause and stop the loop; if it changes back, restore the render loop while preserving the paused state. No CSS animation is required, and reduced-motion CSS disables smooth scrolling and transitions. Keep window.__DEMO__.errors empty during normal operation and never call any console method.

---

TECHNICAL CONTRACT (non-negotiable):

1. Deliver ONE single file: a complete, valid `index.html`. No build step, no bundler,
   no framework, no package install. It must open correctly by double-clicking the file
   and also over http://.
2. Vanilla only. No React, no Tailwind CDN, no GSAP, no Three.js, no jQuery, no Lottie.
   Plain HTML + CSS + modern JavaScript in <style> and <script> tags.
3. NO external media. No .mp4, no .webm, no .gif, no remote images, no base64 blobs of
   photos. Every visual must be generated procedurally with CSS gradients, SVG, or
   <canvas>. This keeps the page free to host and impossible to break with a dead link.
4. Google Fonts is the ONLY permitted network request, and it must be declared with a
   <link rel="preconnect"> plus a system-font fallback stack so the page still looks
   intentional offline. If you prefer, skip it and use a pure system stack.
5. Responsive and correct at 390x844 (phone), 768x1024 (tablet) and 1440x900 (desktop).
   No horizontal scrollbar at any of those widths. Nothing may overflow its container.
6. Accessibility: exactly one <h1>; real <header>/<main>/<footer>/<nav> landmarks; every
   interactive element is a <button> or <a> with an accessible name; visible :focus-visible
   ring; body text contrast ratio >= 4.5:1 against its background.
7. Motion safety: wrap all continuous motion in
   `@media (prefers-reduced-motion: reduce)` rules that reduce it to a static or
   near-static state. The page must remain fully readable and usable with motion off.
8. Performance: no layout thrash. Cache DOM reads, batch writes inside a single
   requestAnimationFrame loop, use transform/opacity for animation, and never allocate
   inside the hot loop. Target 60fps on a 2019 laptop. Total file under 90 KB.
9. Runtime telemetry hook (used by the automated verifier — implement it exactly):
   at the top of your script define
     window.__DEMO__ = { name: '<slug>', ready: false, frames: 0, effects: [], errors: [] };
   then set `ready = true` after the first paint of your main effect, increment
   `frames` once per animation frame inside your rAF loop, and push the name of each
   implemented effect into `effects`. Add a `window.addEventListener('error', ...)`
   handler that pushes messages into `errors`. Do not rename these fields.
10. Zero console output in the happy path. No console.log left behind. No uncaught
    exceptions, no failed network requests.

RESPONSE FORMAT:
Return ONLY the raw HTML inside a single ```html fenced code block. No explanation, no
preamble, no commentary before or after the fence. The file must be complete and
immediately runnable — never truncate, never write "// rest of code here".

Acceptance criteria (14)

1. After load and two animation frames window.__DEMO__.ready is true; after 1200ms in normal motion mode frames is at least 20, effects contains fixed-step-gravity, drag-release-velocity, and fine-orbital-trails, and errors remains empty.
2. The document has exactly one h1 plus semantic header, nav, main, and footer; at 390x844, 768x1024, and 1440x900 the canvas clientWidth is at least 90 percent of innerWidth and documentElement.scrollWidth is no greater than innerWidth.
3. Stable Orbit, Binary System, and Chaos initialize 3, 2, and 7 bodies respectively; Reset restores the selected preset, Pause freezes simulation time, Step advances exactly 1/120 second, Add Body and all four ranges work by keyboard, and the body count never exceeds 24.
4. Dragging and releasing on the canvas adds a body whose velocity follows the drag vector; with prefers-reduced-motion enabled the initial simulation is paused with no continuous animation loop, Step still advances and repaints once, devicePixelRatio is capped at 2, and no external resource requests or console calls occur.
5. window.__DEMO__.ready becomes true within 5s
6. window.__DEMO__.frames advances (>= 20 frames in 1.2s)
7. window.__DEMO__.errors is empty
8. zero console errors and zero page errors
9. zero failed network requests
10. exactly one <h1> with non-empty text
11. header, main, footer landmarks present
12. no horizontal overflow at 390 / 768 / 1440 widths
13. no horizontal overflow after 2s of animation
14. prefers-reduced-motion: reduce leaves the page usable and errors empty