Rail + head + one scrolling main. A CSS grid, because a grid can pin the rails and let exactly one cell scroll. Try scrolling inside it — the page behind does not move.

Two panes that scroll independently; the page never does. On a phone one pane shows at a time.

The brand half is decorative, so it is the half that disappears on a phone — never the form.

The scorecard's shape, generalised. Thirty questions work because they arrive one at a time; the same thirty in one scroll get abandoned. No navigation — removing the exits is the point.

Destructive actions are visually quarantined, so “delete everything” can never sit one row below “change your display name”.

A detached pill with one circular accent action. It earns its shadow — it is genuinely detached from the page, which is the single case the elevation escape hatch exists for. The accent belongs to the primary action, so the bar spends the view's one accent well.

The screens nobody designs and everybody sees. Each one says what happened and then offers the way out — a dead end with an apology is not a state, it is a trap.