@layer components {
  .c-composition-container { padding-block: var(--space-5); }
  .c-composition-spread { --cluster-justify: space-between; }
  .c-composition-map {
    position: relative; isolation: isolate; overflow: clip; min-block-size: calc(var(--space-10) * 2);
    border: var(--wa-border-width) solid var(--wa-context-surface-border); border-radius: var(--wa-radius-panel);
    background-color: var(--wa-color-accent-soft);
    background-image: linear-gradient(32deg, transparent 44%, var(--wa-color-surface) 44%, var(--wa-color-surface) 51%, transparent 51%),
      linear-gradient(112deg, transparent 39%, var(--wa-color-surface) 39%, var(--wa-color-surface) 47%, transparent 47%),
      linear-gradient(170deg, transparent 57%, var(--wa-color-surface) 57%, var(--wa-color-surface) 64%, transparent 64%);
  }
  .c-composition-map::after {
    content: ''; position: absolute; inset-block-start: 46%; inset-inline-start: 56%;
    inline-size: var(--space-5); block-size: var(--space-5); border-radius: var(--wa-radius-control);
    background: var(--wa-color-action); border: var(--border-2) solid var(--wa-color-on-action); box-shadow: var(--wa-shadow-level);
    pointer-events: none;
  }
}