.debug {

  display: grid;
  gap: var(--space-x-large);
  padding-left: var(--space-medium);
  padding-right: var(--space-medium);
  position: relative;

  section {

    display: grid;
    gap: var(--space-medium);
    margin-inline: auto;
    width: min(100%, 30em);

    h2 {

      font-weight: 700;
      line-height: 1.3em;
      margin-bottom: -0.2625em;
      margin-top: -0.4875em;

      a {
        font-weight: inherit;
      }

    }

    dl,
    ul {

      background: rgba(var(--rgb-black), 0.02);
      border-radius: 0.25em;
      box-shadow:
        0 0 0 1px rgba(var(--rgb-black), 0.1),
        0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
      ;
      display: grid;
      gap: 0.5em;
      overflow-x: auto;
      padding: var(--space-medium);
      white-space: nowrap;

      dd,
      li {
        font-family: var(--font-family-monaspace);
        font-size: var(--font-size-xx-small);
        letter-spacing: normal;
        margin-bottom: -0.3625em;
        margin-top: -0.2875em;
      }

    }

    dl {

      counter-reset: counter;

      dt {
        font-size: var(--font-size-small);
        font-weight: 700;
        letter-spacing: var(--letter-spacing);
        margin-top: -0.3625em;
      }

      dd {

        counter-increment: counter;

        &:before {
          content: counter(counter) '.';
          display: inline-block;
          width: 3ch;
        }

      }

    }

    .output {

      position: relative;

      button {

        background: var(--color-white);
        border-radius: 0.125em;
        box-shadow:
          0 0 0 1px rgba(var(--rgb-black), 0.1),
          0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
        ;
        color: var(--color-black);
        cursor: pointer;
        display: flex;
        position: absolute;
        right: 0.2em;
        top: 0.2em;

        span {
          font-size: var(--font-size-xxx-small);
          letter-spacing: var(--letter-spacing-loose);
          white-space: nowrap;
          line-height: 2.2em;
          padding-left: 0.7625em;
          padding-right: 0.7625em;
        }

      }

    }

  }

  @media(hover: hover) {

    section .output button {

      transition:
        box-shadow var(--transition),
        transform var(--transition)
      ;
      will-change: transform;

      &:active {
        transform: scale(0.99) translateY(0.02375em);
      }

      &:focus,
      &:hover {
        box-shadow:
          0 0 0 1px rgba(var(--rgb-black), 0.85),
          0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
        ;
      }

    }

  }

  @media(min-width: 64em) {
    padding-left: var(--space-neutral);
    padding-right: var(--space-neutral);
  }

}