.json {
  font-family: ui-monospace, monospace;
  a { font-style: italic }

  .count, *::before, *::after { color: gray }
  .string  { color: green }
  .number  { color: orange }
  .boolean { color: blue }
  .null    { color: red }
  .date    { color: purple }

  details {
    width: 100%;

    summary {
      cursor: pointer;
      list-style-position: outside;
      &:hover { background-color: linen }
    }

    &:has(> ul) {
      > summary .count::before { content: "{" }
      > summary .count::after  { content: "}" }
      &[open] > summary::after { content: "{"}
      &[open]::after { content: "}"}
    }
    &:has(> ol) {
      > summary .count::before { content: "[" }
      > summary .count::after  { content: "]" }
      &[open] > summary::after { content: "["}
      &[open]::after { content: "]"}
    }
    &[open] > summary .count { display: none }
  }

  li, .count {
    display: flex;
    gap: 1ch;
  }

  ul, ol {
    margin-block: 0;
    padding-inline: 1ch;
  }
  li {
    padding-left: 1ch;
    border-left: 1px solid oklch(0.9 0 none);
  }

  .key { gap: 1ch }
  .key::after { content: ':' }

  .key, .value, .count { display: inline-flex }

  ol {
    counter-reset: item -1;
    & > li {
      counter-increment: item;
      &::before {
        content: counter(item) ": ";
        padding-right: 1ch;
      }
    }
  }
}