TITLE: Bauhaus Shape Lab — a draggable composition playground with a live score strip

PROMPT: Build a single self-contained HTML artwork that is an interactive Bauhaus composition playground. Palette: bone #f0ede6, red #d62828, blue #1d4ed8, yellow #f6c500, black #111111. Layout: a 100dvh CSS grid with three rows — a toolbar (brand "BAUHAUS / SHAPE LAB · 1923" in system-ui 700 uppercase with .3em tracking, plus a wrapped row of square 1.5px-bordered buttons: Circle, Square, Triangle, Half, Bar, Shuffle, and a dashed Clear), a fluid DOM stage, and a bottom score strip. The stage holds a giant low-opacity "BAUHAUS" wordmark (system-ui 900, clamp(58px,17.5vw,250px), colour rgba(17,17,17,.055)) behind a 24px graph-paper grid drawn with two linear-gradients. Shapes are absolutely positioned divs: circle (border-radius 50%), square, triangle (clip-path polygon), bar, and half-circle (border-radius 50% 50% 0 0 / 100% 100% 0 0), each with a colour cycling through the palette. Interaction: pointer-capture dragging with live transform writes, release snapping x/y to a 24px grid and rotation to 15° through a springy cubic-bezier(.18,1.5,.36,1) transform transition (transition disabled while dragging, then a forced reflow so the spring actually plays); double-click or the R key rotates the selected shape; Del removes it; Escape deselects; hover or selection draws a 2px black outline offset 6px; toolbar buttons spawn new shapes with a transform-only entrance; Shuffle repositions and re-rotates everything; Clear empties the stage. The score strip recomputes on every release from centre-of-mass balance, stage coverage density, and mean pairwise bounding-box overlap tension, printed as a ui-monospace number out of 100 with a verdict word (Masterful / Composed / Promising / Searching) and three bordered metric bars animating scaleX with a 0.62s ease. Respect prefers-reduced-motion by killing every transition. One inline <style>, one inline IIFE <script> at the end of body, zero external references, no canvas.

DESCRIPTION: A working Bauhaus composition machine. Primary shapes in red, blue, yellow and black sit on bone graph paper under an enormous ghosted BAUHAUS wordmark; you drag them, they spring onto a 24px grid, and a score strip at the bottom judges the arrangement in real time on balance, density and tension. The rotation snaps to 15° so compositions always feel deliberate, and the toolbar lets you add, shuffle or clear the stage.

TECHNIQUES: DOM stage with absolutely positioned transform-driven shapes; pointer capture for reliable drag on mouse and touch; springy snap via transform transitions plus a forced reflow so the spring fires after class removal; getBoundingClientRect-free geometry math on stored records; clip-path triangle and half-circle border-radius shape vocabulary; live composition scoring from centre-of-mass balance, coverage density and pairwise overlap tension; scaleX-animated metric bars; transform-only spawn entrance so frozen renders stay complete; single IIFE with no globals.

INTERACTION: Drag any shape to move it (pointer capture, clamped to the stage); on release it springs onto a 24px grid and its rotation snaps to 15°. Double-click a shape or press R to rotate it 15°; press Del/Backspace to delete the selection; press Escape to deselect; click empty stage to deselect. Toolbar buttons add circles, squares, triangles, half-circles or bars at a jittered centre; Shuffle randomises every position and rotation; Clear empties the stage. Hovering or selecting a shape shows a 2px outline, and the score number, verdict word and three metric bars animate every time the composition changes.