@layer pages {
  .builder__container { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-16); grid-template-columns: minmax(0, 1fr); }
  .builder__layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
  .builder__aside { order: -1; }
  .builder__panel { display: grid; gap: var(--space-6); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); min-inline-size: 0; }
  .builder__panel h2:focus { outline: none; }
  .builder__head { display: grid; gap: var(--space-2); }
  .builder__fields { display: grid; gap: var(--space-5); }
  .builder__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .builder__chips .ds-chip { min-block-size: var(--touch-target); }
  .builder__chips .ds-chip:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
  .builder__options, .builder__bases { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  .builder__stats { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder__nav { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; padding-block-start: var(--space-5); border-block-start: var(--border-width) solid var(--color-border); }
  .builder__nav-end { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-inline-start: auto; }

  @media (min-width: 48rem) {
    .builder__panel { padding: var(--space-8); }
    .builder__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .builder__bases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .builder__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (min-width: 80rem) {
    .builder__layout { grid-template-columns: minmax(0, 1fr) var(--size-120); gap: var(--space-8); }
    .builder__aside { order: 0; position: sticky; inset-block-start: var(--sticky-top); }
  }
}