.marker-link {
  --link-ink: #48556b;
  --marker-rgb: 126, 194, 255;
  color: var(--link-ink);
  font-weight: 600;
  text-decoration: none;
  text-decoration-color: transparent;
  background-color: rgba(var(--marker-rgb), 0.42);
  background-image:
    linear-gradient(91deg, rgba(var(--marker-rgb), 0.24) 0 12%, rgba(var(--marker-rgb), 0.04) 12% 20%, rgba(var(--marker-rgb), 0.2) 20% 36%, transparent 36% 49%, rgba(var(--marker-rgb), 0.16) 49% 63%, rgba(var(--marker-rgb), 0.03) 63% 74%, rgba(var(--marker-rgb), 0.22) 74% 100%),
    linear-gradient(88deg, rgba(var(--marker-rgb), 0.1) 0 10%, rgba(var(--marker-rgb), 0.26) 10% 29%, transparent 29% 41%, rgba(var(--marker-rgb), 0.2) 41% 57%, rgba(var(--marker-rgb), 0.06) 57% 70%, rgba(var(--marker-rgb), 0.24) 70% 100%),
    linear-gradient(93deg, rgba(var(--marker-rgb), 0.14) 0 13%, transparent 13% 22%, rgba(var(--marker-rgb), 0.24) 22% 38%, rgba(var(--marker-rgb), 0.06) 38% 49%, rgba(var(--marker-rgb), 0.2) 49% 71%, transparent 71% 78%, rgba(var(--marker-rgb), 0.16) 78% 100%),
    linear-gradient(181deg, rgba(var(--marker-rgb), 0.18) 0 18%, rgba(var(--marker-rgb), 0.04) 18% 34%, rgba(var(--marker-rgb), 0.2) 34% 61%, rgba(var(--marker-rgb), 0.1) 61% 100%),
    radial-gradient(ellipse at 18% 28%, rgba(255, 255, 255, 0.16) 0 22%, transparent 23%),
    radial-gradient(ellipse at 73% 78%, rgba(var(--marker-rgb), 0.24) 0 18%, transparent 19%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='6' viewBox='0 0 54 6'%3E%3Cpath d='M1 4.2 C7 3.4 11 4.8 17 3.9 S29 3.6 36 4.2 S46 4.8 53 3.7' fill='none' stroke='%2348556b' stroke-opacity='0.72' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M2 5 C12 4.4 20 5.1 30 4.5 S43 4 52 4.6' fill='none' stroke='%2348556b' stroke-opacity='0.22' stroke-width='0.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x, repeat, no-repeat, repeat, repeat, repeat-x;
  background-size: 118px 0.34em, 106px 0.36em, 74px 100%, 100% 100%, 29px 17px, 43px 19px, 54px 6px;
  background-position: 0 -0.02em, 7px calc(100% + 0.02em), 0 0, 0 0, 4px 0, 9px 2px, 0 100%;
  box-shadow:
    -0.12em 0.01em 0 rgba(var(--marker-rgb), 0.32),
    0.12em -0.01em 0 rgba(var(--marker-rgb), 0.28),
    0 -0.13em 0 rgba(var(--marker-rgb), 0.3),
    0 0.14em 0 rgba(var(--marker-rgb), 0.26);
  border-radius: 2px 3px 2px 4px;
  padding: 0.08em 0.1em 0.09em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.marker-link:hover,
.marker-link:focus-visible {
  color: #2f3f57;
  text-decoration: none;
}

.marker-yellow {
  --marker-rgb: 255, 225, 86;
  --link-ink: #4d4b42;
}

.marker-green {
  --marker-rgb: 143, 220, 161;
}

.marker-peach {
  --marker-rgb: 255, 184, 108;
}

.marker-blue {
  --marker-rgb: 126, 194, 255;
}

.marker-pink {
  --marker-rgb: 255, 162, 194;
}

.marker-lilac {
  --marker-rgb: 194, 181, 255;
  --link-ink: #4d526e;
}

#toggle-button.marker-link,
#side-panel .marker-link {
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  animation: none;
  text-decoration: none;
  font-weight: 600;
}

#toggle-button.marker-link:hover {
  animation: none;
}