#article *:not([data-no-xray] *):not([data-no-xray]):not(block-wrapper):not(block-wrapper > *):not(block-wrapper > * > *) {
}

#article .editor *:not(em):not(a):not(b):not(strong):not(i):not(u):not(sup):not(span) {
  box-shadow: inset 0px 0px 1px 1px color-mix(in srgb, var(--color-ctp-overlay-0) 25%, transparent);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#article .editor em {
  color: var(--color-ctp-green);
}

#article .editor i {
  color: var(--color-ctp-green);
}

#article .editor u {
  text-decoration-thickness: 2px;
}

#article .editor sup {
  color: var(--color-ctp-mauve);
}

#article .editor span,
#article .editor style,
#article .editor script,
#article .editor iframe,
#article .editor object,
#article .editor font,
#article .editor [style],
#article .editor [onclick],
#article .editor [onmouseover],
#article .editor [onload],
#article .editor [onerror],
#article .editor [onfocus],
#article .editor [onblur],
#article .editor [onchange],
#article .editor [onsubmit]
{
  background: color-mix(in srgb, var(--color-ctp-red) 25%, transparent) !important;
  outline: 1px dashed var(--color-ctp-red) !important;
  color: var(--color-ctp-red) !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#article .editor p::before {
  content: "<p>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-text);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor h1::before {
  content: "<h1>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-pink);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor h2::before {
  content: "<h2>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-pink);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor h3::before {
  content: "<h3>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-pink);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor h4::before {
  content: "<h4>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-pink);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor h5::before {
  content: "<h5>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-pink);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor h6::before {
  content: "<h6>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-pink);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor ul::before {
  content: "<ul>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-text);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor ol::before {
  content: "<ol>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-text);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor li::before {
  content: "<li>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-text);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor div::before {
  content: "<div>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-green);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor aside::before {
  content: "<aside>";
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.8;
  left: 1px;
  top: 1px;
  height: 1rem;
  background: var(--color-ctp-surface-0);
  color: var(--color-ctp-green);
  font-size: 1rem;
  border-radius: 0 3px 3px 0;
  padding-left: 2px;
  padding-right: 2px;
}

#article .editor div.endnote-container::before {
  content: "<div> (endnote)" !important;
}

#article .editor aside.endnote-container::before {
  content: "<aside> (endnote)" !important;
}

#article .editor div.author::before {
  content: "<div> (authors)" !important;
}

#article .editor aside.author::before {
  content: "<aside> (authors)" !important;
}

#article .editor ul,
#article .editor ol {
  margin-left: 0 !important;
  list-style-position: inside;
}

#article .editor li {
  list-style-position: inside;
}

#article li:not(:is(ul *, ol *))::marker {
  color: var(--color-ctp-red) !important;
}

#article .editor li::marker {
  color: var(--color-ctp-subtext-0)
}

.cutline {
  display: none !important;
}

/* make images in image-helpers have a min height so you can select them lol */

image-helper img[data-ref] {
  min-height: 100px;
}