@layer cavalree {
  :where(.c-box) {
    --c--color--border: currentcolor;
    --c--color--canvas: transparent;
    --c--color--text: inherit;

    --c-box--background--blend-mode: normal;
    --c-box--background--image: none;
    --c-box--background--position: 50%;
    --c-box--background--position--x: var(--c-box--background--position);
    --c-box--background--position--y: var(--c-box--background--position);
    --c-box--border--size: 0px;
    --c-box--color--border: var(--c--color--border);
    --c-box--color--canvas: var(--c--color--canvas);
    --c-box--color--text: var(--c--color--text);
    --c-box--flow: row;
    --c-box--gap: 0px;
    --c-box--gap--column: var(--c-box--gap);
    --c-box--gap--row: var(--c-box--gap);
    --c-box--padding: 0px;
    --c-box--padding--block: var(--c-box--padding);
    --c-box--padding--block--end: var(--c-box--padding--block);
    --c-box--padding--block--start: var(--c-box--padding--block);
    --c-box--padding--inline: var(--c-box--padding);
    --c-box--padding--inline--end: var(--c-box--padding--inline);
    --c-box--padding--inline--start: var(--c-box--padding--inline);
    --c-box--place: normal;
    --c-box--place--block: var(--c-box--place);
    --c-box--place--inline: var(--c-box--place);
    --c-box--size--block--min: 0px;
    --c-box--size--inline--max: none;
    --c-box--typography--align: inherit;
    --c-box--typography--case: inherit;
    --c-box--typography--family: inherit;
    --c-box--typography--line-height: inherit;
    --c-box--typography--size: inherit;
    --c-box--typography--style: inherit;
    --c-box--typography--tracking: inherit;
    --c-box--typography--weight: inherit;
  }

  .c-box {
    align-items: var(--c-box--place--block);
    background-blend-mode: var(--c-box--background--blend-mode);
    background-color: var(--c-box--color--canvas);
    background-image: var(--c-box--background--image);
    background-position-x: var(--c-box--background--position--x);
    background-position-y: var(--c-box--background--position--y);
    background-size: cover;
    border-color: var(--c-box--color--border);
    border-width: var(--c-box--border--size);
    color: var(--c-box--color--text);
    column-gap: var(--c-box--gap--column);
    display: grid; /* TODO: and_chr >= 115, chrome >= 115, edge >= 115 */
    display: block grid;
    grid-auto-flow: var(--c-box--flow);
    justify-items: var(--c-box--place--inline);
    min-block-size: var(--c-box--size--block--min);
    padding-block-end: var(--c-box--padding--block--end);
    padding-block-start: var(--c-box--padding--block--start);
    padding-inline-end: var(--c-box--padding--inline--end);
    padding-inline-start: var(--c-box--padding--inline--start);
    row-gap: var(--c-box--gap--row);
  }

  .c-box_item {
    column-gap: inherit;
    display: flex; /* TODO: and_chr >= 115, chrome >= 115, edge >= 115 */
    display: block flex;
    flex-direction: column;
    font-family: var(--c-box--typography--family);
    font-size: var(--c-box--typography--size);
    font-style: var(--c-box--typography--style);
    font-weight: var(--c-box--typography--weight);
    inline-size: 100%;
    letter-spacing: var(--c-box--typography--tracking);
    line-height: var(--c-box--typography--line-height);
    max-inline-size: var(--c-box--size--inline--max);
    row-gap: inherit;
    text-align: var(--c-box--typography--align);
    text-transform: var(--c-box--typography--case);
  }
}
