#article p:not([data-no-xray] p):not([data-no-xray]) {
  position: relative;
}

#article span:not([data-no-xray] span):not([data-no-xray]) {
  position: relative;
}

#article a:not([data-no-xray] a):not([data-no-xray]) {
  position: relative;
}

#article sup:not([data-no-xray] sup):not([data-no-xray]) {
  position: relative;
}

#article em:not([data-no-xray] em):not([data-no-xray]) {
  position: relative;
}

#article strong:not([data-no-xray] strong):not([data-no-xray]) {
  position: relative;
}

#article h1:not([data-no-xray] h1):not([data-no-xray]) {
  position: relative;
}

#article h2:not([data-no-xray] h2):not([data-no-xray]) {
  position: relative;
}

#article h3:not([data-no-xray] h3):not([data-no-xray]) {
  position: relative;
}

#article h4:not([data-no-xray] h4):not([data-no-xray]) {
  position: relative;
}

#article h5:not([data-no-xray] h5):not([data-no-xray]) {
  position: relative;
}

#article h6:not([data-no-xray] h6):not([data-no-xray]) {
  position: relative;
}

#article div:not([data-no-xray] div):not([data-no-xray]) {
  position: relative;
}

#article aside:not([data-no-xray] aside):not([data-no-xray]) {
  position: relative;
}

#article ul:not([data-no-xray] ul):not([data-no-xray]) {
  position: relative;
}

#article ol:not([data-no-xray] ol):not([data-no-xray]) {
  position: relative;
}

#article li:not([data-no-xray] li):not([data-no-xray]) {
  position: relative;
}

#exportContainer {
  position: relative;
  z-index: 0;
}

@keyframes flashGradient {
  0%   { opacity: 0.5; }
  100% { opacity: 0.2; }
}

.scrollto {
  animation: scrollto-highlight 2s ease-out;
}

@keyframes scrollto-highlight {
  0% {
    outline: 4px solid var(--color-ctp-blue);
    outline-offset: 4px;
  }

  70% {
    outline: 4px solid var(--color-ctp-blue);
    outline-offset: 4px;
  }

  100% {
    outline: 4px solid transparent;
    outline-offset: 4px;
  }
}

.image-container {
  position: relative !important;
  z-index: 10;
}

.loader {
  width: 60px;
  aspect-ratio: .5;
  display: grid;
}
.loader:before {
  content: "";
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: auto auto 0;
  background: var(--color-ctp-yellow);
  animation: l9-0 .5s cubic-bezier(0,800,1,800) infinite;
}
.loader:after {
  content: "";
  width: 100%;
  aspect-ratio: 1/cos(30deg);
  margin: 0 auto auto;
  clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
  background: var(--color-ctp-surface-2);
  animation: l9-1 .5s linear infinite;
}
@keyframes l9-0 {
  0%,2%  {translate: 0   0%}
  98%,to {translate: 0 -.2%}
}
@keyframes l9-1 {
  0%,5%  {rotate:  0deg}
  95%,to {rotate:-60deg}
}

::highlight(hyphensHighlight) {
  background-color: color-mix(in srgb, var(--color-ctp-yellow) 25%, transparent) !important;
}

::highlight(removeHyphensHighlight) {
  background-color: color-mix(in srgb, var(--color-ctp-red) 25%, transparent) !important;
}