@layer components{.build-introduction,.build-purpose,.build-principles,.build-example,.build-closing{padding-block:var(--layout-section-space)}.build-container{inline-size:min(100% - 2 * var(--layout-gutter), var(--container-content));margin-inline:auto}.build-stack{gap:var(--spacing-6);display:grid}.build-stack--compact{gap:var(--spacing-4)}.build-hero,.build-section-heading,.build-boundary{max-inline-size:var(--container-reading)}.build-eyebrow{color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}.build-lede{font-size:var(--text-lg)}.build-purpose{background:var(--color-surface);border-block:var(--border-default) solid var(--color-border)}.build-purpose__layout,.build-example__layout{gap:var(--spacing-8);display:grid}.build-steps,.build-principle-grid{margin:0;padding:0;list-style:none}.build-steps{counter-reset:build-step;gap:var(--spacing-4);display:grid}.build-steps li{border-block-start:var(--border-default) solid var(--color-border-strong);counter-increment:build-step;align-items:start;gap:var(--spacing-4);grid-template-columns:auto minmax(0,1fr);padding-block-start:var(--spacing-4);display:grid}.build-steps li:before{background:var(--color-text-strong);border-radius:var(--radius-pill);color:var(--color-canvas);content:counter(build-step);font-weight:var(--font-weight-bold);justify-content:center;align-items:center;min-block-size:2rem;min-inline-size:2rem;display:inline-flex}.build-principle-grid{gap:var(--spacing-6);display:grid}.build-principle{border-inline-start:var(--spacing-1) solid var(--color-border-strong);block-size:100%;padding-inline-start:var(--spacing-6)}.build-example{border-block:var(--border-default) solid var(--color-border)}.build-action{justify-self:start}.build-closing{background:var(--color-surface);border-block-end:var(--border-default) solid var(--color-border)}.build-actions{align-items:center;gap:var(--spacing-4) var(--spacing-6);flex-wrap:wrap;display:flex}.build-actions>a:not([class]){align-items:center;min-block-size:44px;display:inline-flex}}@media (width>=48rem){.build-principle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=64rem){.build-purpose__layout,.build-example__layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}@media (forced-colors:active){.build-purpose,.build-example,.build-closing,.build-steps li,.build-principle{border-color:canvastext}.build-steps li:before{color:canvas;background:canvastext}}