@layer components {
  pre.body,
  pre.error {
    --pre-rule: var(--color-rule);
    --pre-bg: var(--color-shade);

    white-space: pre-wrap;
    word-break: break-word;
    max-block-size: 32rem;
    overflow: auto;
    padding: var(--card-padding);
    border: 1px solid var(--pre-rule);
    border-radius: var(--radius);
    font-size: var(--text-small);
    background: var(--pre-bg);
  }

  pre.error {
    --pre-rule: var(--color-wrong-rule);
    --pre-bg: var(--color-wrong-wash);
  }

  .body-frame {
    display: block;
    box-sizing: content-box;
    inline-size: 100%;
    block-size: 8rem;
    max-block-size: 32rem;
    margin-block-end: var(--block-space-half);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    background: #fff;
    color-scheme: light;
  }
}