@scope (stack-ui) {
  :where(:scope) {
    --stack-align-default: center;
  }

  :scope {
    box-sizing: border-box;
    display: grid;
    place-items: var(--stack-align, var(--stack-align-default));
    /* Universal [padding] / [margin] opt-in — see tokens.css for scale. */
    padding: var(--a-padding, 0);
    margin: var(--a-margin, 0);
    /* Same UA override as row-ui/col-ui: [align=...] is for flex/grid, not text. */
    text-align: inherit;
  }

  & > * {
    grid-area: 1 / 1;
  }

  /* Alignment */
  :scope[align="center"]       { --stack-align-default: center; }
  :scope[align="top-left"]     { --stack-align-default: start start; }
  :scope[align="top-right"]    { --stack-align-default: start end; }
  :scope[align="bottom-left"]  { --stack-align-default: end start; }
  :scope[align="bottom-right"] { --stack-align-default: end end; }
  :scope[align="top"]          { --stack-align-default: start center; }
  :scope[align="bottom"]       { --stack-align-default: end center; }
  :scope[align="left"]         { --stack-align-default: center start; }
  :scope[align="right"]        { --stack-align-default: center end; }
}
