#article-main {
  &
    :is(
      :where(input):not(:where([class~='not-prose'] *)):where(
          input[type='checkbox']
        )
    ) {
    display: none;
  }

  & :is(:where(pre):has(code)) > code {
    @apply font-normal !important;
  }

  & :is(:where(h2):has(code)) > code {
    @apply text-2xl font-bold !important;
  }

  & :is(:where(h3):has(code)) > code {
    @apply text-xl font-semibold !important;
  }

  & :has(h3) {
    & :is(h2:not(:has(+ h3))) {
      @apply flex whitespace-pre-wrap text-2xl font-bold mb-4 text-[#10172A] dark:text-[#e2e8f0] !important;
    }
  }
}

#article-main:not(:has(h3)) {
  & :is(h2) {
    @apply mb-4 flex whitespace-pre-wrap text-2xl font-bold text-[#10172A] dark:text-[#e2e8f0] !important;
  }

  & :is(:where(h2):has(code)) > code {
    @apply text-xl font-bold !important;
  }
}

:root {
  --color: hsl(0 0% 6%);
  --bg: hsl(0 0% 98%);
}

::view-transition-group(root) {
  animation-duration: 1.25s;
}
::view-transition-new(root),
::view-transition-old(root) {
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation-name: reveal-light;
}

::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: none;
}
.dark::view-transition-new(root) {
  animation-name: reveal-dark;
}

@keyframes reveal-dark {
  from {
    clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
  }
  to {
    clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
  }
}

@keyframes reveal-light {
  from {
    clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
  }
  to {
    clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
  }
}
