@layer pages {
  .unicode {
    & #unicode-source {
      min-block-size: 10rem;
      max-block-size: 28lh;
    }

    & .clean {
      margin-block: 0;
      font: 400 var(--text-lead) / var(--leading-lead) var(--font-text);
    }

    & .kinds {
      margin: 0;
      padding: 0;
      list-style: none;

      & > li + li {
        margin-block-start: var(--space-20);
      }

      & h3 {
        margin-block: 0 var(--space-4);
      }

      & p {
        margin-block: 0 var(--space-4);
      }
    }

    & .count {
      color: var(--color-muted);
      font-weight: 400;
      font-variant-numeric: tabular-nums;
    }

    & .secret q {
      padding-inline: var(--space-4);
      border-radius: var(--radius-inline);
      background: var(--color-cyan-soft);
      font-family: var(--font-mono);
      font-size: var(--text-code);
      overflow-wrap: anywhere;
    }

    & .codes {
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--color-muted);
      font-size: var(--text-small);
      line-height: var(--leading-small);

      & code {
        color: var(--color-charcoal);
        white-space: nowrap;
      }
    }

    & .marked {
      margin-block-start: var(--space-24);
    }

    & .view {
      max-block-size: 24lh;
      font-size: var(--text-code);
      line-height: var(--leading-code);

      & code {
        unicode-bidi: isolate;
      }
    }

    & mark {
      border-radius: var(--radius-inline);
      background: var(--color-cyan-soft);
      color: inherit;

      &.threat {
        background: var(--syntax-deletion);
      }

      &.label {
        padding-inline: var(--space-4);
        font: var(--weight-subheading) var(--text-micro) / 1 var(--font-text);
        white-space: nowrap;
        vertical-align: 0.1em;
      }

      @media (forced-colors: active) {
        outline: 1px solid Highlight;
      }
    }

    & .manual {
      margin-block-start: var(--space-16);

      &:has(.note:empty) {
        display: none;
      }

      & label {
        display: block;
        margin-block-end: var(--space-4);
      }
    }
  }
}