Prompt:
Build a standalone soft-UI (neumorphic) thermostat page called "Hearth Soft Thermostat" for a fictional smart-home brand. Palette: a single pale blue-gray surface #e5eaf1 for the page and every element, with light shadows #ffffff and dark shadows #b9c3d2, text slate #4a5568, secondary #8d98aa, and an accent that is computed live from the target temperature, blending cool blue rgb(76,141,255) through lavender to warm orange rgb(255,122,61). Typography: rounded system stack ("SF Pro Rounded", Nunito, Segoe UI, system-ui), light 300 weight tabular numerals for the big reading, small wide-tracked uppercase labels. Layout: one centered device card (max 420px, 44px radius) raised with large paired shadows. Top row: "Living room / Inside 19.4°" and an inset status pill with a glowing accent dot (Heating, Cooling, Holding, or Eco variants). Center: a large circular raised dial (aspect-ratio 1) with an inline SVG overlay (viewBox 300): 41 ticks spanning 270 degrees from −135 to +135 (every fifth one longer), a recessed track arc with a faint white highlight arc, a value arc in the accent color doubled by a blurred glow copy, a raised round knob with drop-shadow filters and a colored center dot at the target position, and a thin needle from the center. Ticks light up in the accent color up to the needle. Inside, a recessed circular well shows the temperature in large light digits with a small °C superscript and a "Target" label. Below: round raised minus and plus buttons that press into an inset state, and an inset segmented control with Heat, Eco and Cool where the selected segment is raised (each mode applies a preset). Footer copy estimates time to reach the target. Motion: the needle is driven by spring physics (stiffness 170, damping 11, four substeps per frame) toward the target angle, so it overshoots and settles; on load it sweeps up from the minimum. The displayed number follows the needle, not the target, so digits roll with the spring. The room temperature drifts slowly toward the target every four seconds. Interaction: pointer drag anywhere on the dial (pointer capture, touch-action none) sets the target from the angle in 0.5° steps between 10° and 30°, with a dead zone at the bottom gap; the dial is an ARIA slider supporting arrow keys, PageUp/PageDown, Home and End. Reduced motion snaps the needle with no spring.

Title: Hearth Soft Thermostat

Description: A tactile, calm thermostat rendered entirely in soft extruded and recessed surfaces. The ring glows from cool blue to ember orange as you set the warmth, the needle springs into place with a satisfying wobble, and the numerals roll alongside it. Small details such as the lit tick marks, glowing status dot and pressed-in buttons make the object feel physical and premium.

Visual techniques:
- Neumorphism with paired light and dark outer shadows and inset shadows for wells, pills and pressed states
- Inline SVG ticks, arcs and knob generated in JavaScript with polar-to-cartesian math
- Blurred duplicate arc as a soft color glow, SVG drop-shadow filters on the knob
- Live accent color interpolation shared through a CSS custom property
- Semi-implicit spring integration with substeps for a stable, bouncy needle
- Rolling numeric readout derived from the needle position

Interaction model: Drag around the dial to set a temperature, or use the plus and minus buttons, or focus the dial and use the arrow, Page and Home/End keys. Choosing Heat, Eco or Cool applies a preset and updates the status. The needle springs toward each new setting, the arc and ticks recolor, and the footer updates the estimated time to reach the target while the room reading slowly drifts toward it.