TITLE: Mesh Gradient Editor — Blended Field

PROMPT: Build a single self-contained HTML page (system fonts only, no external assets) titled "Mesh Gradient Editor — Blended Field": a full-viewport generative mesh-gradient editor on base #0f172a with draggable colour nodes. The gradient is painted on a fixed full-bleed canvas that is rendered at one third of its CSS size into an offscreen canvas and then upscaled with image smoothing — a cheap two-pass blur that makes the field buttery. Each node is a radial gradient with four alpha stops (rgba .78 at the centre, .34 at 38%, .11 at 72%, 0 at the rim) composited with globalCompositeOperation 'lighter' over the base fill, so overlaps bloom into pastel mesh blends; a subtle top-light-to-bottom-shade linear gradient is laid over the result. A fixed CSS veil adds a radial vignette plus a 3px dot grain. Node handles are DOM elements positioned with translate3d and a --c custom property driving a radial halo, a 14px colour dot with a white ring and a glow shadow, a dashed rotating selection ring (14s linear) and a hover/selected monospace hex tag. Top bar is a floating glass pill (rgba(15,23,42,.62), 1px rgba(148,163,184,.16), backdrop-filter blur 14px) with a monospace "MESH / 060" brand, five preset names in Georgia italic (Aurora, Dusk, Mint, Ember, Nocturne — selected state inverts to #e2e8f4 on #0f172a) and two monospace tool buttons (+ node, randomize). A right-hand glass rail holds eight colour swatches (#38bdf8, #f472b6, #fde68a, #34d399, #a78bfa, #fb7185, #22d3ee, #f8fafc) plus a minus button for deleting the selected node; a bottom glass readout shows the selected hex with a glowing dot, the node count and the selected node's normalised position, with a key hint. JS in one IIFE: nodes store normalised x/y plus spring targets; each frame runs a critically-ish damped spring (k 0.085, damp 0.80; k 0.34 / damp 0.72 while dragging) so drags carry inertia and presets spring into place; RGB channels lerp at 0.13 per frame and radius grows from 0.32 to 1 (and shrinks to 0 before removal) so nodes fade in and out by size, never opacity; a per-node sine pulse on the radius (0.055 amplitude) makes the field breathe; handle transform writes are dirty-gated to whole pixels. Presets set targets for the first N nodes and shrink the rest. Interactions: drag handles (pointer capture), double-click the canvas to add a node with the next palette colour, alt-click a handle or press the rail minus to remove it, click a swatch to recolour the selected node, presets animate every node, randomize scatters positions with a velocity kick, resize re-fits and re-places. The readout is primed once at boot so the first painted frame already shows the selected hex, node count and position. Reduced motion disables the radius pulse, the selection-ring spin and UI transitions. No console errors; every lookup guarded.

DESCRIPTION: A mesh-gradient editor where the gradient itself is the hero. Colour nodes float over a soft, breathing field built from additive radial gradients rendered at a third of the screen and upscaled, giving smooth blends without a single blur filter. Handles are jewellery — a glowing dot, a dashed selection ring, a monospace hex chip — and they move with real spring physics, so dragging a node throws it slightly past your finger before it settles, and switching a preset makes the whole composition glide into a new mood. The chrome is deliberately quiet: a floating glass pill of Georgia-italic preset names, a slim swatch rail, and a single line of monospace instrumentation at the bottom.

TECHNIQUES:
- Additive ('lighter') multi-stop radial gradients on a one-third-resolution offscreen canvas, upscaled with image smoothing
- Spring physics per node (drag k/damp vs. settle k/damp) for inertia and preset glides
- Per-frame RGB interpolation and radius grow/shrink for size-based (opacity-free) node entrances
- Sine radius pulse for an idle breathing field; dirty-gated whole-pixel handle transforms
- Pointer capture drag with alt-click removal and radius-shrink deletion
- CSS custom property --c driving halo, dot, glow and selection ring per node
- Glassmorphism chrome with backdrop-filter, floating preset pill and vertical swatch rail
- Responsive re-fit on resize; reduced-motion fallbacks for pulse, spin and transitions

INTERACTION: Drag any node handle — it follows with spring lag and keeps drifting with inertia when you release, blending its colour into its neighbours in real time. Double-click empty canvas space to add a node (it grows in from zero radius with the next palette colour); alt-click a handle, or press the minus button in the rail, to remove the selected node, which shrinks away. Click a swatch in the right rail to recolour the selected node; the handle, halo, glow and readout all follow. Click a preset name (Aurora, Dusk, Mint, Ember, Nocturne) and every node springs to its new position while colours cross-fade; nodes are added or removed to match the preset. RANDOMIZE scatters all nodes with a velocity kick. Resizing re-fits the canvas and re-places the handles. The bottom readout live-updates the selected hex, node count and normalised position.