A redesigned website builder: real CSS controls, layered backgrounds and a resizable canvas

The website builder now looks and works like a professional design tool. The whole interface moved to a dark designer theme, and the style panel was rebuilt from scratch around the way CSS actually works - grouped into Layout, Spacing, Size, Position, Typography, Backgrounds, Borders and Effects. Spacing is now a visual box you drag: hold Alt to change both sides at once, Shift for all four. Flex layouts get a nine-point alignment picker. There's a proper Position section - static, relative, absolute, fixed and sticky with offsets, z-index, float and clear - which simply didn't exist before. Typography shows the six controls you reach for and tucks the other fifteen behind "More type options". Backgrounds are now layers you stack, reorder and toggle - images and linear, radial or conic gradients with a draggable angle dial and editable colour stops - over a single background colour, exactly as CSS models them. Effects is a full suite: multiple box shadows (inside or outside), 2D and 3D transforms, transitions, filters and backdrop filters - blur, brightness, contrast, hue rotate, saturation, grayscale, invert and sepia - each an add-and-reorder stack. Every colour field now has a real picker with an alpha channel, an eyedropper, and one-click swatches from your site theme. Two things make it trustworthy: a coloured dot beside every property tells you whether a value is set on this breakpoint, inherited from a wider one, or just the browser default - click it to remove - and controls that wouldn't do anything are disabled with a reason, so offsets grey out until you leave Static and float greys out inside a flex container. The canvas got handles on both edges: drag to any width, snapping to the real breakpoints, and Desktop now fills all the space between the panels. Breakpoints match the industry standard at 991, 767 and 479 pixels, and a label down the canvas tells you which resolutions your edits affect. You can now right-click any element for cut, copy, paste styles, duplicate, wrap in a container, convert its tag, select parent, hide and copy CSS. And a new Interactions tab adds click, hover, scroll-into-view and page-load animations with duration, delay and easing - previewable on the canvas, and automatically skipped for visitors who prefer reduced motion. The Add panel was rebuilt too: elements are now searchable and split into Elements (structure, basic, typography, media, forms) and Layouts (navigation, heroes, whole sections and your saved sections), so you type "pricing" instead of scrolling. And the Settings tab now gives every element a proper ID field for in-page links, a per-breakpoint Visible/Hidden switch, custom HTML attributes, and an option to keep its text out of search result snippets.