Three slots in a column at flex: 1 with an 8px gap (Stack flex={1} gap={8}, Container/index.tsx): the progress bar, the content, the button row. The content is a MotionStack flex={1} gap={16} overflow="auto" padded var(--tray-body-padding) — so content blocks sit 16px apart and the area scrolls. The button row is a Stack direction="row" gap={8} padded 0 16px 16px: no padding on top, because the frame's own 8px gap already separates it. Only four rules live in Container/index.module.pcss (overflow-x: clip, the blur, and the two padding blocks); everything else above is Stack props. overflow-x: clip carries a source comment: it stops the slide animation producing a horizontal scrollbar without clipping the shadows of anything inside.

Header takes no type props. The ladder comes from StepStyle in const/defaults/step.ts: regular is h3 over body1, left aligned; large is display1 over display2, centred. The Stack has no gap, so the line-heights do the spacing. min-height: 88px applies unless withoutMinHeight — it reserves room for a two-line title so the content below does not jump between steps. The large variant adds margin-bottom: 16px and a gap of 16px that drops to 8px from 768px up; both gaps are !important in the source, because they have to beat the inline gap Stack writes.

Container writes four custom properties as an inline style on its own element when size="large" — largeStyleProps in Container/index.tsx: --input-height: 60px, --input-font-size: 20px, --input-font-size-mobile: 20px, --input-start-adornment-size: 16px. Every Input and Select inside inherits them, which is how one prop resizes a whole screen's fields. Regular steps pass undefined and keep the :root values. This twin declares them on a [data-rt-step-size="large"] attribute scope instead of a class, so they read as a scoped override of existing tokens rather than four new tokens. Nothing global changes, and the token files are untouched. Note the widget does not enlarge buttons the same way — the step's buttons are already size="large" (64px) at both sizes.

From StepContainer/index.tsx, in this order: Back (tertiary), then Continue or Submit (primary, carrying the only rule in StepContainer/index.module.pcss — flex: 1), then Skip (tertiary). All three are size="large", so the row is 64px tall. The primary's label is isLastStep ? submitButtonLabel : nextButtonLabel, defaulting to Submit and Continue; "Back" and "Skip" are hard-coded. Back hides on the first step, and also when the previous visible step was final. isLoading does three things at once: the primary shows the LinearLoader, Back goes disabled, and the content gets pointer-events: none.

The step slides with the leftRight preset from const/animations.ts: 0.2s ease-in-out, translateX ±100%, entering from the stepper's direction and always exiting left. withAnimation={false} passes transition={{ duration: 0 }} rather than removing the animation, so the step still mounts through the same code path. The twin reproduces the enter with a keyframe and honours prefers-reduced-motion; the widget relies on motion/react for that.