src-web/src/styles/_editor-content.css
.editor-content {
  @apply whitespace-pre-wrap;
  --checklist-checked-icon: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');

  --notes-foreground: var(--color-zinc-900, #171717);
  --notes-token-constant: var(--color-blue-500, #005ff2);
  --notes-token-string: var(--color-zinc-700);
  --notes-token-comment: var(--color-zinc-400);
  --notes-token-keyword: var(--color-red-500, #c41562);
  --notes-token-parameter: var(--color-orange-500, #aa4d00);
  --notes-token-function: var(--color-purple-500, #7d00cc);
  --notes-token-string-expression: var(--color-zinc-700);
  --notes-token-punctuation: var(--color-zinc-900, #171717);
  --notes-token-link: var(--color-zinc-700);
  --notes-token-number: var(--color-zinc-900, #111111);
  --notes-token-property: var(--color-blue-500, #005ff2);
  --notes-highlight: var(--color-blue-100, #dfefff);
  --notes-highlight-border: var(--color-blue-500, #005ff2);
  --notes-highlight-hover: #dfefff4d;
  --notes-token-diff-deleted: var(--color-red-500, #e2162a);
  --notes-token-diff-inserted: var(--color-green-500, #009432);

  :first-child {
    @apply mt-0!;
  }

  :last-child {
    @apply mb-0!;
  }

  h1,
  h2,
  h3 {
    @apply font-bold tracking-[-0.01em];
  }

  h1 {
    @apply mb-1.5 mt-6 text-2xl;
  }

  h2 {
    @apply mb-1 mt-4 text-xl;
  }

  h3 {
    @apply mb-1 mt-4 text-base;
  }

  p {
    @apply mb-1.5 text-[15px] leading-snug;
  }

  ul:not([data-type='taskList']) {
    @apply ps-6.5 mb-2 list-disc;
  }

  ol {
    @apply ps-6.5 mb-2 list-decimal;

    li::marker {
      @apply tracking-tighter;
    }
  }

  li:not(:has(input[type='checkbox'])) {
    @apply mb-1 marker:text-red-500;

    p {
      @apply mb-0;
    }
  }

  ul[data-type='taskList'] {
    @apply mb-2 ml-0.5;

    li:has(input[type='checkbox']) {
      @apply mb-2 flex items-start;

      label {
        @apply mt-[2.5px]! relative mr-1.5;

        input[type='checkbox'] {
          @apply absolute size-0 opacity-0;

          &:checked + span {
            @apply bg-red-500 before:bg-white;

            &::before {
              @apply opacity-100;
            }
          }
        }

        span {
          @apply block size-4 rounded-md border-[1.5px] border-red-500;

          &::before {
            @apply absolute left-0.5 top-0.5 size-3 opacity-0 content-[''];
            -webkit-mask: var(--checklist-checked-icon) center/contain no-repeat;
            mask: var(--checklist-checked-icon) center/contain no-repeat;
          }
        }
      }

      &:has(input[type='checkbox']:checked) div p {
        @apply line-through opacity-50;
      }

      div {
        @apply min-w-0 flex-1;

        p {
          @apply mb-0;
        }
      }
    }
  }

  code:not(:where(pre code)) {
    @apply rounded-md bg-zinc-200 px-[5px] font-mono text-zinc-700;
  }

  a {
    @apply cursor-pointer text-red-500 underline;
  }

  hr {
    @apply my-4 rounded border border-zinc-300;
  }

  blockquote {
    @apply mb-2 ml-1.5 mt-2.5 border-l-2 border-red-500 py-1 pl-4;

    p {
      @apply mb-0;
    }
  }

  pre {
    @apply hide-scrollbar my-3 mb-2 overflow-x-auto rounded-xl bg-zinc-100 px-4 py-2.5;

    code {
      @apply whitespace-pre-wrap p-0;
    }
  }

  /* Tiptap placeholder */
  p.is-editor-empty:first-child::before {
    @apply pointer-events-none float-left h-0 text-gray-400 content-[attr(data-placeholder)];
  }

  p.is-empty::before {
    @apply pointer-events-none float-left h-0 text-gray-400 content-[attr(data-placeholder)];
  }
}
