@scope (adia-mark-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --adia-mark-size:   var(--a-size, 2.5rem);
    --adia-mark-radius: var(--a-radius-lg);
    /* Fixed by design — always the inverse pairing, never a themeable
       variant. See adia-mark.yaml's anti_patterns entry. */
    --adia-mark-bg: var(--a-canvas-surface-inverse);
    --adia-mark-fg: var(--a-fg-inverse);

    --adia-mark-size-xs: 1.25rem;
    --adia-mark-size-sm: 1.75rem;
    --adia-mark-size-md: 2.5rem;
    --adia-mark-size-lg: 3.5rem;
    --adia-mark-size-xl: 4.5rem;
  }

  :scope {
    /* ADR-0037 — block-level by default; [inline] opts into inline-block
       for the common "beside a text run" case (a topbar brand slot). */
    display: block;
    width: var(--adia-mark-size);
    height: var(--adia-mark-size);
    border-radius: var(--adia-mark-radius);
    background: var(--adia-mark-bg);
    overflow: hidden;
    flex-shrink: 0;
  }

  :scope[inline] { display: inline-block; }

  :scope > svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  :scope > svg [data-mark-glyph] {
    fill: var(--adia-mark-fg);
  }

  /* ── Size ladder ── */
  :scope[size="xs"] { --adia-mark-size: var(--adia-mark-size-xs); }
  :scope[size="sm"] { --adia-mark-size: var(--adia-mark-size-sm); }
  :scope[size="md"] { --adia-mark-size: var(--adia-mark-size-md); }
  :scope[size="lg"] { --adia-mark-size: var(--adia-mark-size-lg); }
  :scope[size="xl"] { --adia-mark-size: var(--adia-mark-size-xl); }
}
