@layer trace.elements {
  :where(:root) {
    --trace-font-size-h1: 3rem;
    --trace-font-size-h2: 2.5rem;
    --trace-font-size-h3: 2rem;
    --trace-font-size-h4: 1.5rem;
    --trace-font-size-h5: 1.25rem;
    --trace-font-size-h6: 1rem;
    --trace-typography-line-height: 1.6;
    --trace-heading-line-height: 1.25;
    --trace-heading-margin-block-end: 1rem;
    --trace-paragraph-margin-block-end: 1rem;
    --trace-divider-margin-block: 2rem;
    --trace-blockquote-margin-block: 1.5rem;
    --trace-blockquote-padding-block: 0.75rem;
    --trace-blockquote-padding-inline: 1.25rem;
    --trace-typography-border: light-dark(
      var(--trace-neutral-light),
      var(--trace-neutral-dark)
    );
    --trace-code-border: light-dark(
      var(--trace-typography-border),
      var(--trace-neutral-light)
    );
    --trace-code-bg: light-dark(
      oklch(from var(--trace-neutral-darker) l c h / 4%),
      oklch(from var(--trace-neutral-lighter) l c h / 7%)
    );
    --trace-mark-bg: var(--trace-secondary-lighter);
    --trace-mark-text: var(--trace-neutral-darker);
    --trace-kbd-bg: light-dark(
      var(--trace-neutral-dark),
      var(--trace-neutral-lighter)
    );
    --trace-kbd-text: light-dark(
      var(--trace-text-dark),
      var(--trace-text-light)
    );
    --trace-kbd-border: light-dark(
      var(--trace-neutral-darker),
      var(--trace-neutral-light)
    );
    --trace-kbd-shadow: 1px 1px 0 0
      oklch(from var(--trace-neutral-darker) l c h / 25%);
    --trace-blockquote-border: light-dark(
      var(--trace-primary),
      var(--trace-secondary)
    );
    --trace-blockquote-bg: light-dark(
      color-mix(
        in oklch,
        var(--trace-bg-light),
        var(--trace-neutral-darker) 5%
      ),
      color-mix(in oklch, var(--trace-bg-dark), var(--trace-neutral-lighter) 8%)
    );
  }

  @media (width < 48rem) {
    :where(:root) {
      --trace-font-size-h1: 2rem;
      --trace-font-size-h2: 1.75rem;
      --trace-font-size-h3: 1.5rem;
      --trace-font-size-h4: 1.25rem;
      --trace-font-size-h5: 1.125rem;
    }
  }

  :where(body) {
    line-height: var(--trace-typography-line-height);
    overflow-wrap: anywhere;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    margin-block: 0 var(--trace-heading-margin-block-end);
    font-family: var(--trace-font-heading);
    font-weight: 700;
    line-height: var(--trace-heading-line-height);
    overflow-wrap: anywhere;
  }

  :where(h1) {
    font-size: var(--trace-font-size-h1);
  }

  :where(h2) {
    font-size: var(--trace-font-size-h2);
  }

  :where(h3) {
    font-size: var(--trace-font-size-h3);
  }

  :where(h4) {
    font-size: var(--trace-font-size-h4);
  }

  :where(h5) {
    font-size: var(--trace-font-size-h5);
  }

  :where(h6) {
    font-size: var(--trace-font-size-h6);
  }

  :where(code, pre, kbd, samp) {
    font-family: var(--trace-font-code);
  }

  :where(code:not(pre code)) {
    padding-inline: 0.25em;
    border: 1px solid var(--trace-code-border);
    border-radius: var(--trace-radius-sm);
    background-color: var(--trace-code-bg);
    box-decoration-break: clone;
  }

  :where(pre) {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: auto;
  }

  :where(p) {
    margin-block: 0 var(--trace-paragraph-margin-block-end);
    line-height: var(--trace-typography-line-height);
  }

  :where(ul, ol, dl) {
    line-height: var(--trace-typography-line-height);
  }

  :where(abbr[title]) {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
  }

  :where(strong, b) {
    font-weight: 700;
  }

  :where(i, em, cite) {
    font-style: italic;
  }

  :where(del, s) {
    text-decoration: line-through;
  }

  :where(ins, u) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  :where(kbd) {
    display: inline-block;
    padding: 0.125em 0.375em;
    border: 1px solid var(--trace-kbd-border);
    border-bottom-width: 2px;
    border-radius: var(--trace-radius-sm);
    background-color: var(--trace-kbd-bg);
    color: var(--trace-kbd-text);
    box-shadow: var(--trace-kbd-shadow);
    font-size: 0.875em;
    line-height: 1.25;
    vertical-align: baseline;
  }

  :where(mark) {
    padding: 0.125em 0.25em;
    border-radius: var(--trace-radius-sm);
    background-color: var(--trace-mark-bg);
    color: var(--trace-mark-text);
    box-decoration-break: clone;
  }

  :where(small) {
    font-size: 0.875em;
  }

  :where(sub, sup) {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
  }

  :where(sub) {
    bottom: -0.25em;
  }

  :where(sup) {
    top: -0.5em;
  }

  :where(hr) {
    height: 0;
    margin-block: var(--trace-divider-margin-block);
    border: 0;
    border-block-start: 2px solid var(--trace-typography-border);
  }

  :where(blockquote) {
    margin-block: var(--trace-blockquote-margin-block);
    margin-inline: 0;
    padding-block: var(--trace-blockquote-padding-block);
    padding-inline: var(--trace-blockquote-padding-inline);
    border-inline-start: 0.25rem solid var(--trace-blockquote-border);
    background-color: var(--trace-blockquote-bg);
    line-height: var(--trace-typography-line-height);
  }

  :where(blockquote > :last-child) {
    margin-block-end: 0;
  }
}