/* neat-annotations — neat hand-drawn CSS annotations: arrows + handwritten labels.
   https://github.com/syabro/neat-annotations · MIT license.
   Labels look best with the Shantell Sans font (falls back to system cursive). */

.ann {
  --ann-color: oklch(0.62 0.005 30);
  --ann-mark: light-dark(color-mix(in oklch, var(--ann-color) 10%, transparent), oklch(from var(--ann-color) l calc(c * 1.35) h / 24%));
  --ann-font: 'Shantell Sans', cursive;
  --ann-target-gap: 5px;
  --ann-label-gap: 6px;
  --ann-lower-label-gap: -4px;
  --ann-label-max-width: 150px;
  --ann-arrow-x: 0px;
  --ann-text-x: 0px;
  --ann-arrow-y: 0px;
  --ann-text-y: 5px;
  --ann-rotate: -4deg;
  position: relative;
  display: inline-block;
  overflow: visible;
  line-height: 1.15;
  border-radius: 3px;
  background: var(--ann-mark);
  box-shadow:
    -0.3em 0 0 0 var(--ann-mark),
    0.3em 0 0 0 var(--ann-mark);
}

.ann::after {
  content: attr(data-note);
  position: absolute;
  z-index: 4;
  width: max-content;
  max-width: var(--ann-label-max-width);
  transform: rotate(var(--ann-rotate));
  font-family: var(--ann-font);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ann-color);
  opacity: .9;
  white-space: normal;
  pointer-events: none;
}

.ann::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: 46px;
  height: 38px;
  transform-origin: 50% 50%;
  -webkit-mask: var(--_ann-arrow-mask) center / contain no-repeat;
  mask: var(--_ann-arrow-mask) center / contain no-repeat;
  background: var(--ann-color);
  opacity: .9;
  pointer-events: none;
}

.ann:not([data-note])::before,
.ann:not([data-note])::after,
.ann[data-note=""]::before,
.ann[data-note=""]::after { display: none; }

.ann-amber { --ann-color: #b8751a; --ann-mark: light-dark(color-mix(in oklch, #ffb000 14%, transparent), color-mix(in oklch, #ffb000 22%, transparent)); }
.ann-blue { --ann-color: #3b72c4; }
.ann-green { --ann-color: #2f8f5b; }
.ann-red { --ann-color: #c45a38; }
.ann-purple { --ann-color: #8657c8; }
.ann-rainbow { --ann-color: #ff1493; }
.ann-no-mark { --ann-mark: transparent; }

@keyframes ann-rainbow-cycle { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .ann-rainbow { animation: ann-rainbow-cycle 3s linear infinite; }
}

.ann-n::before {
  left: calc(50% - 23px + var(--ann-arrow-x));
  top: calc(100% + var(--ann-target-gap) - 4px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 35 C22 26 22 15 23 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M17 10 L23 3 L29 10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-n::after { left: calc(50% + var(--ann-text-x)); top: calc(100% + var(--ann-target-gap) + 31px + var(--ann-lower-label-gap) + var(--ann-text-y)); transform: translateX(-50%) rotate(var(--ann-rotate)); }

.ann-ne::before {
  left: calc(50% - 40px + var(--ann-arrow-x));
  top: calc(100% + var(--ann-target-gap) - 6px + var(--ann-arrow-y));
  transform: translateX(-10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 32 C16 30 28 18 40 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M30 10 L40 6 L36 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-ne::after { left: calc(50% - 34px + var(--ann-text-x)); top: calc(100% + var(--ann-target-gap) + 26px + var(--ann-lower-label-gap) + var(--ann-text-y)); transform: translateX(-60%) rotate(var(--ann-rotate)); }

.ann-e::before {
  left: calc(-1 * var(--ann-target-gap) - 43px + var(--ann-arrow-x));
  top: calc(50% - 19px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19 C15 18 31 18 43 19' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M36 13 L43 19 L36 25' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-e::after { right: calc(100% + var(--ann-target-gap) + 39px + var(--ann-label-gap) - var(--ann-text-x)); top: calc(50% - 5px + var(--ann-text-y)); transform: translateY(-50%) rotate(var(--ann-rotate)); }

.ann-se::before {
  left: calc(50% - 40px + var(--ann-arrow-x));
  top: calc(-1 * var(--ann-target-gap) - 32px + var(--ann-arrow-y));
  transform: translateX(-10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6 C16 8 28 20 40 32' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M36 22 L40 32 L30 28' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-se::after { left: calc(50% - 34px + var(--ann-text-x)); bottom: calc(100% + var(--ann-target-gap) + 26px + var(--ann-label-gap) - var(--ann-text-y)); transform: translateX(-60%) rotate(var(--ann-rotate)); }

.ann-s::before {
  left: calc(50% - 23px + var(--ann-arrow-x));
  top: calc(-1 * var(--ann-target-gap) - 35px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 4 C22 13 22 24 23 35' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M17 29 L23 36 L29 29' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-s::after { left: calc(50% + var(--ann-text-x)); bottom: calc(100% + var(--ann-target-gap) + 31px + var(--ann-label-gap) - var(--ann-text-y)); transform: translateX(-50%) rotate(var(--ann-rotate)); }

.ann-sw::before {
  left: calc(50% - 6px + var(--ann-arrow-x));
  top: calc(-1 * var(--ann-target-gap) - 32px + var(--ann-arrow-y));
  transform: translateX(10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 6 C30 8 18 20 6 32' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10 22 L6 32 L16 28' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-sw::after { left: calc(50% + 34px + var(--ann-text-x)); bottom: calc(100% + var(--ann-target-gap) + 26px + var(--ann-label-gap) - var(--ann-text-y)); transform: translateX(-40%) rotate(var(--ann-rotate)); }

.ann-w::before {
  left: calc(100% + var(--ann-target-gap) - 3px + var(--ann-arrow-x));
  top: calc(50% - 19px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43 19 C32 18 15 18 3 19' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10 13 L3 19 L10 25' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-w::after { left: calc(100% + var(--ann-target-gap) + 40px + var(--ann-label-gap) + var(--ann-text-x)); top: calc(50% - 5px + var(--ann-text-y)); transform: translateY(-50%) rotate(var(--ann-rotate)); }

.ann-nw::before {
  left: calc(50% - 6px + var(--ann-arrow-x));
  top: calc(100% + var(--ann-target-gap) - 6px + var(--ann-arrow-y));
  transform: translateX(10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 32 C30 30 18 18 6 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M16 10 L6 6 L10 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-nw::after { left: calc(50% + 34px + var(--ann-text-x)); top: calc(100% + var(--ann-target-gap) + 26px + var(--ann-lower-label-gap) + var(--ann-text-y)); transform: translateX(-40%) rotate(var(--ann-rotate)); }