div.ProseMirror {
  & {
    /* Disable margin collapsing */
    display: flex;
    flex-direction: column;
  }

  /* The editor surface owns the document-edge inset. Scope margin resets to
     direct document children so nested blocks keep their local rhythm. */
  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }

  /* Frontmatter has its own bottom margin; use a uniform heading margin here
     to preserve the intended 2rem inter-block gap without title padding. */
  & > pre[data-frontmatter]:first-child + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 1.5rem;
  }

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    font-weight: 600;
    line-height: 1.25;
    padding-top: 0;
    padding-bottom: 0;
    border-style: none;
  }

  & a {
    text-decoration: underline;
    font-weight: 500;
  }

  & .wiki-link {
    border-radius: 0.2rem;
    color: hsl(var(--BV-wiki-link-foreground));
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-color: hsl(var(--BV-wiki-link-underline));
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    cursor: pointer;
    transition:
      background-color 120ms ease,
      color 120ms ease;
  }

  & .wiki-link:hover,
  & .wiki-link:focus-visible {
    background-color: hsl(var(--BV-wiki-link-hover-background));
    color: hsl(var(--BV-wiki-link-hover-foreground));
    text-decoration-color: currentColor;
  }

  & .wiki-link:focus-visible {
    outline: 2px solid hsl(var(--BV-wiki-link-focus));
    outline-offset: 1px;
  }

  & .wiki-link.ProseMirror-selectednode {
    outline: none;
    background-color: hsl(var(--BV-wiki-link-hover-background));
    box-shadow: 0 0 0 2px hsl(var(--BV-wiki-link-focus));
  }

  & .wiki-link-unresolved {
    color: hsl(var(--BV-wiki-link-missing-foreground));
    font-weight: 500;
    text-decoration-style: dotted;
    text-decoration-color: hsl(var(--BV-wiki-link-missing-underline));
  }

  & .wiki-link-unresolved:hover,
  & .wiki-link-unresolved:focus-visible {
    background-color: hsl(var(--BV-wiki-link-missing-hover-background));
  }

  & .math-node {
    min-width: 0.75em;
    min-height: 1em;
    border-radius: 0.3rem;
    color: hsl(var(--BV-foreground));
    font-size: 1em;
    font-family: inherit;
  }

  & math-inline {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    vertical-align: baseline;
  }

  & math-inline .math-render {
    padding: 0 0.1em;
    font-size: 1em;
  }

  & math-display {
    margin: 0.5rem 0;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    border: 1px solid transparent;
  }

  & math-display .math-render {
    min-width: max-content;
  }

  & .math-node .math-src {
    color: hsl(var(--BV-foreground));
  }

  & .math-node .math-src .ProseMirror {
    border: 1px solid hsl(var(--BV-border));
    border-radius: 0.3rem;
    padding: 0.15rem 0.35rem;
    background: hsl(var(--BV-muted) / 0.35);
    color: hsl(var(--BV-foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", monospace;
    white-space: pre-wrap;
  }

  & .math-node .math-src .ProseMirror:focus {
    border-color: hsl(var(--BV-pop) / 0.6);
    box-shadow: none;
    outline: none;
  }

  & .math-node.ProseMirror-selectednode {
    background: hsl(var(--BV-muted) / 0.12);
    box-shadow: 0 0 0 1px hsl(var(--BV-pop) / 0.45);
    outline: none;
  }

  & .math-node.ProseMirror-selectednode:focus-within {
    background: transparent;
    box-shadow: none;
  }

  & .math-node .katex-error,
  & .math-node .math-render.parse-error {
    color: hsl(var(--BV-destructive));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", monospace;
    white-space: pre-wrap;
  }

  & .math-node.empty-math .math-render::before {
    color: hsl(var(--BV-muted-foreground));
  }

  & p::selection,
  & p > *::selection,
  & .math-node.math-select .math-render {
    background-color: hsl(var(--BV-pop) / 0.25);
  }

  &.interactive-link-open-modifier a {
    cursor: pointer;
  }

  & img.interactive-local-image-broken {
    min-width: 8rem;
    min-height: 4rem;
    border: 1px dashed hsl(var(--border));
    background: hsl(var(--muted));
  }

  & p,
  & ul,
  & ol,
  & pre {
    margin: 0;
    padding: 0.5rem 0;
    line-height: 1.5;
  }

  & p,
  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6,
  & blockquote {
    overflow-wrap: anywhere;
  }

  & blockquote {
    padding-left: 1em;
    border-left: 0.25em solid hsla(0, 0%, 60%, 0.4);
  }

  & h1 {
    margin: 2rem 0 1rem;
    font-size: 2.25rem;
  }

  & h2 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.5rem;
  }

  & h3 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.25rem;
  }

  & h4 {
    margin: 1rem 0 0.5rem;
    font-size: 1.125rem;
  }

  & h5 {
    margin: 0.75rem 0 0.5rem;
    font-size: 1rem;
  }

  & h6 {
    margin: 0.75rem 0 0.5rem;
    font-size: 0.875rem;
    opacity: 0.8;
  }

  /* Margins don't collapse in the flex column layout (see the `display: flex`
     above), so a heading placed directly after another heading would stack
     both margins into a large, jarring gap. Tighten the top margin in that
     case while preserving the normal spacing when a heading follows body
     text. */
  & :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0.5rem;
  }

  & img,
  & video {
    margin: 0;
    width: min-content;
    max-width: 100%;
  }

  & code:not(pre code) {
    font-size: 0.95em;
    font-weight: 500;
    padding: 0.125em 0.25em;
    border-radius: 0.375rem;
    word-break: break-word;
    border: 1px solid hsl(var(--BV-border) / 0.6);
    background-color: hsl(var(--BV-accent) / 0.9);
    color: hsl(var(--BV-secondary-foreground));
  }

  & pre {
    margin: 0.5rem 0;
    padding: 2.55rem 1rem 0.95rem;
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--BV-border) / 0.65);
    position: relative;
  }

  & pre::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2.05rem;
    border-bottom: 1px solid hsl(var(--BV-border) / 0.45);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background-color: hsl(var(--BV-muted) / 0.18);
    pointer-events: none;
  }

  & pre,
  & code {
    white-space: break-spaces;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    tab-size: 4;
    hyphens: none;
  }

  & pre {
    background-color: var(--prosemirror-highlight-bg, hsl(var(--BV-accent)));
    color: var(--prosemirror-highlight, hsl(var(--BV-accent-foreground)));
  }

  & code {
    background-color: hsl(var(--BV-accent));
    color: hsl(var(--BV-accent-foreground));
  }

  & pre code {
    background-color: transparent;
    color: inherit;
    font-weight: inherit;
    display: block;
    line-height: 1.35;
    font-size: 0.95rem;
    padding: 0;
  }

  /* Frontmatter reuses the code-block chrome; its header band carries a
     fixed label instead of the language/copy widgets. */
  & pre[data-frontmatter]::before {
    content: "frontmatter";
    padding: 0.54rem 0 0 0.75rem;
    font-size: 0.68rem;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: hsl(var(--BV-muted-foreground));
  }

  & .prosemirror-code-copy-widget,
  & .prosemirror-frontmatter-actions-widget {
    position: absolute;
    top: 0.42rem;
    right: 0.65rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    /* Chrome is never document text (data-editor-chrome); also keep native
       drag-selections from sweeping it up. */
    user-select: none;
    -webkit-user-select: none;
  }

  & .prosemirror-code-language-widget {
    position: absolute;
    top: 0.42rem;
    left: 0.75rem;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
  }

  & .prosemirror-code-language-select {
    width: 8.75rem;
    border: 1px solid hsl(var(--BV-border) / 0.65);
    border-radius: 0.3rem;
    padding: 0.14rem 1.65rem 0.14rem 0.4rem;
    color: hsl(var(--BV-muted-foreground));
    font-size: 0.68rem;
    line-height: 1.25;
    background-color: hsl(var(--BV-background) / 0.78);
    cursor: pointer;
  }

  & .prosemirror-code-language-select:hover,
  & .prosemirror-code-language-select:focus-visible {
    color: hsl(var(--BV-foreground));
    border-color: hsl(var(--BV-border));
    outline: none;
  }

  & .prosemirror-code-copy-button,
  & .prosemirror-code-run-button,
  & .prosemirror-block-delete-button {
    border: 1px solid transparent;
    border-radius: 0.25rem;
    padding: 0.12rem 0.35rem;
    font-size: 0.75rem;
    line-height: 1.25;
    color: hsl(var(--BV-muted-foreground));
    background-color: transparent;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }

  & .prosemirror-code-copy-button:hover,
  & .prosemirror-code-run-button:hover {
    color: hsl(var(--BV-foreground));
    background-color: hsl(var(--BV-background) / 0.5);
  }

  & .prosemirror-block-delete-button:hover {
    color: hsl(var(--BV-destructive));
    background-color: hsl(var(--BV-background) / 0.5);
  }

  & table {
    border-collapse: collapse;
    margin: 0.5rem 0;
    /* The editor is a column flexbox, which stretches tables to the full
       row width and dumps the slack into the widest column. Size to content
       instead. */
    width: fit-content;
    align-self: flex-start;
    max-width: 100%;
    overflow-x: auto;
  }

  & th,
  & td {
    position: relative;
    border: 1px solid hsl(var(--BV-border));
    padding: 0.3rem 0.6rem;
    min-width: 3rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  & th {
    background-color: hsl(var(--BV-muted) / 0.35);
    font-weight: 600;
  }

  /* the cell the cursor is in */
  & .prosemirror-active-table-cell {
    outline: 2px solid hsl(var(--BV-pop) / 0.4);
    outline-offset: -2px;
    border-radius: 2px;
  }

  /* prosemirror-tables marks cells covered by a CellSelection */
  & .selectedCell::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: hsl(var(--BV-pop) / 0.12);
    pointer-events: none;
    z-index: 2;
  }

  & hr {
    margin: 1rem 0;
  }

  & .prosemirror-horizontal-rule {
    padding: 0;
    margin: 1rem 0;

    & hr {
      margin: 0;
    }
  }

  & .prosemirror-flat-list {
    line-height: 1.5;

    /* List headings are nested document content, so they need a local edge
       reset rather than inheriting the top-level document rule above. */
    & > .list-content > :is(h1, h2, h3, h4, h5, h6):first-child {
      margin-top: 0;
    }

    & > .list-content > :is(h1, h2, h3, h4, h5, h6):last-child {
      margin-bottom: 0;
    }

    &::before,
    & > .list-marker {
      top: 0.5rem;
    }
    &:has(> div.list-content > h1) {
      &::before,
      & > .list-marker {
        top: 0.65rem;
      }
    }
    &:has(> div.list-content > h2) {
      &::before,
      & > .list-marker {
        top: 0.2rem;
      }
    }
    &:has(> div.list-content > h3) {
      &::before,
      & > .list-marker {
        top: 0.05rem;
      }
    }
    &:has(> div.list-content > h4) {
      &::before,
      & > .list-marker {
        top: 0;
      }
    }
    &:has(> div.list-content > h5) {
      &::before,
      & > .list-marker {
        top: -0.05rem;
      }
    }
    &:has(> div.list-content > h6) {
      &::before,
      & > .list-marker {
        top: -0.125rem;
      }
    }
  }

  .ProseMirror-selectednode {
    z-index: calc(infinity);
    outline: 2px solid hsl(var(--BV-pop));
    outline-offset: 1px;
    border-radius: 0.375rem;
  }

  /*
     Don't generate box for node view wrapper. This make it easier to style
     the node views.
     */
  div[data-node-view-root="true"] {
    display: contents;
  }
}

/* The upstream math stylesheet contains an unscoped paragraph-selection
 * rule. Keep its math layout styles, but restore the browser/user selection
 * color everywhere outside an editor. */
p:not(div.ProseMirror p)::selection,
p:not(div.ProseMirror p) > *::selection {
  background-color: revert;
}

.prosemirror-flat-list {
  & {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 32px;
    position: relative;
    display: list-item;
    list-style: none;
  }

  &.ProseMirror-selectednode {
    outline: none;

    &:after {
      content: "";
      position: absolute;
      left: -32px;
      right: -2px;
      top: -2px;
      bottom: -2px;
      border: 2px solid #8cf;
      pointer-events: none;
    }
  }

  &[data-list-kind="bullet"] {
    list-style: disc;
  }

  &[data-list-kind="ordered"] {
    /*
    Ensure that the counters in children don't escape, so that the sub lists
    won't affect the counter of the parent list.

    See also https://github.com/ocavue/prosemirror-flat-list/issues/23
    */
    & > * {
      contain: style;
    }

    &::before {
      position: absolute;
      right: 100%;
      font-variant-numeric: tabular-nums;
      content: counter(prosemirror-flat-list-counter, decimal) ". ";
    }

    counter-increment: prosemirror-flat-list-counter;

    /* 
    Reset the counter for the first list node in the sequence.
    */
    &:first-child,
    :not(&) + & {
      counter-reset: prosemirror-flat-list-counter;

      /* 
      If the first list node has a custom order number, set the counter to that value.
      */
      &[data-list-order] {
        @supports (counter-set: prosemirror-flat-list-counter 1) {
          counter-set: prosemirror-flat-list-counter
            var(--prosemirror-flat-list-order);
        }

        /* 
        Safari older than version 17.2 doesn't support `counter-set` 
        */
        @supports not (counter-set: prosemirror-flat-list-counter 1) {
          counter-increment: prosemirror-flat-list-counter
            var(--prosemirror-flat-list-order);
        }
      }
    }
  }

  &[data-list-kind="task"] {
    & > .list-marker {
      position: absolute;
      right: 100%;
      text-align: center;
      width: 1lh;

      &,
      & * {
        cursor: pointer;
      }
    }
  }

  &[data-list-kind="toggle"] {
    & > .list-marker {
      position: absolute;
      right: 100%;
      text-align: center;
      width: 1lh;
    }

    & > .list-marker::before {
      content: "\23F7"; /* Black Medium Down-Pointing Triangle */
    }
    &[data-list-collapsable][data-list-collapsed] > .list-marker::before {
      content: "\23F5"; /* Black Medium Right-Pointing Triangle */
    }

    &[data-list-collapsable] > .list-marker {
      cursor: pointer;
    }
    &:not([data-list-collapsable]) > .list-marker {
      opacity: 40%;
      pointer-events: none;
    }

    /* If collapsed, hide the second and futher children */
    &[data-list-collapsable][data-list-collapsed]
      > .list-content
      > *:nth-child(n + 2) {
      display: none;
    }
  }
}

div.ProseMirror {
  /* Trailing slot: inline widgets that follow a block's text (fold toggles,
     future badges). On a wrapped block the slot flows with the last line. */
  & .B-block-trailing-slot {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.375rem;
    user-select: none;
  }

  & .B-collapsible-heading-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    border-radius: 0.25rem;
    background: transparent;
    color: hsl(var(--BV-muted-foreground));
    cursor: pointer;
    opacity: 0;
    transition:
      opacity 0.15s ease,
      background-color 0.15s ease;
  }

  & .B-collapsible-heading-toggle svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.15s ease;
  }

  & :is(h1, h2, h3, h4, h5, h6):hover .B-collapsible-heading-toggle,
  & .B-collapsible-heading-toggle:focus-visible,
  & .B-collapsible-heading-toggle[data-folded="true"] {
    opacity: 1;
  }

  & .B-collapsible-heading-toggle:not(:disabled):hover {
    background-color: hsl(var(--BV-accent));
    color: hsl(var(--BV-foreground));
  }

  /* A heading with nothing beneath it keeps the toggle for visual
     consistency, but dimmed and inert. */
  & :is(h1, h2, h3, h4, h5, h6):hover .B-collapsible-heading-toggle:disabled {
    opacity: 0.35;
    cursor: default;
  }

  & .B-collapsible-heading-toggle[data-folded="true"] svg {
    transform: rotate(-90deg);
  }

  /* Hidden-content cue next to the toggle. Rendered inside the slot: a
     ::after on the heading itself would land after ProseMirror's trailing
     break and wrap to its own line. */
  & .B-block-trailing-slot:has(> [data-folded="true"])::after {
    content: "\22EF"; /* Midline horizontal ellipsis */
    margin-left: 0.25rem;
    font-size: 0.6em;
    opacity: 0.5;
  }

  & .B-collapsible-heading-hidden {
    display: none;
  }
}

@media (hover: none) {
  div.ProseMirror .B-collapsible-heading-toggle {
    opacity: 0.6;
  }

  div.ProseMirror .B-collapsible-heading-toggle:disabled {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  div.ProseMirror .B-collapsible-heading-toggle,
  div.ProseMirror .B-collapsible-heading-toggle svg {
    transition: none;
  }
}