@scope (canvas-ui) {

  /* ═══════════════════════════════════════════════════════
     TOKENS
     ═══════════════════════════════════════════════════════ */

  :where(:scope) {
    --canvas-bg:              var(--a-canvas-0);
    --canvas-fg:              var(--a-fg);
    --canvas-font-family:     var(--a-font-family);
    --canvas-inset:           var(--a-space-2);
    --canvas-surface-bg:      var(--a-bg);
    --canvas-surface-max:     56rem;
  }

  /* ═══════════════════════════════════════════════════════
     CANVAS HOST
     ═══════════════════════════════════════════════════════ */

  :scope {
    box-sizing:          border-box;
    display:             flex;
    flex-direction:      column;
    min-height:          0;
    height:              100%;
    background:          var(--canvas-bg);
    color:               var(--canvas-fg);
    font-family:         var(--canvas-font-family);
  }

  /* ═══════════════════════════════════════════════════════
     SURFACE (a2ui-root area)
     ═══════════════════════════════════════════════════════ */

  [data-canvas-surface] {
    flex:                1;
    display:             flex;
    align-items:         center;
    justify-content:     center;
    overflow:            auto;
    padding:             var(--canvas-inset);
    min-height:          0;
    background:          var(--canvas-surface-bg);
  }

  [data-canvas-surface] > a2ui-root,
  [data-canvas-surface] > theme-ui {
    display:             block;
    width:               100%;
    max-width:           var(--canvas-surface-max);
  }
}
