.handwritten {
  display: inline-block;
  font-style: italic;
  line-height: 1.4;
}

/* CHARACTER */
.char {
  display: inline-block;
  transform: rotate(var(--rot-mod, 0deg)) translateY(var(--baseline-mod, 0px));
  font-size: calc(1em * var(--size-mod, 1));
}

/* FONTS */

.cursive {
  font-family: 'Brush Script MT', 'Lucida Calligraphy', 'Comic Sans MS', cursive;
}

.script {
  font-family: 'Great Vibes', 'Pinyon Script', 'Brush Script MT', cursive;
}

.signature {
  font-family: 'Sacramento', 'Great Vibes', cursive;
}

.messy {
  font-family: 'Marker Felt', 'Comic Sans MS', cursive;
  transform: rotate(-1deg);
}

.neat {
  font-family: 'Snell Roundhand', 'Lucida Handwriting', cursive;
}

/* EFFECTS */

/* Ink bleed */
.inkBleed .char {
  text-shadow: 0 0 1px currentColor, 0 0 2px currentColor, 0 0 3px currentColor;
  filter: url(#ink-bleed);
}

.inkBleed::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

/* Paper background */
.paper::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: #f5f0e6;
  border: 1px solid #d4c9b8;
  border-radius: 2px;
  z-index: -1;
  transform: rotate(-1deg);
}

/* Coffee stain hint */
.handwritten.stained::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: -10px;
  width: 30px;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(101, 67, 33, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
}

/* Scratched out text */
.handwritten.crossed::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transform: rotate(-5deg);
  opacity: 0.7;
}

/* Underline */
.handwritten.underlined::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: rotate(-2deg);
  opacity: 0.6;
}

/* Highlight */
.handwritten.highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  bottom: 0;
  background: rgba(255, 255, 0, 0.3);
  z-index: -1;
  transform: rotate(-1deg);
  border-radius: 2px;
}

/* Circled */
.handwritten.circled {
  position: relative;
}

.handwritten.circled::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  z-index: -1;
  transform: rotate(2deg);
}

/* Arrows pointing */
.handwritten.arrowed::before {
  content: '→';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%) rotate(-10deg);
  opacity: 0.7;
}

.handwritten.arrowed::after {
  content: '←';
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%) rotate(10deg);
  opacity: 0.7;
}

/* Question mark annotation */
.handwritten.questioned::before {
  content: '?';
  position: absolute;
  right: -15px;
  top: -10px;
  color: #cc0000;
  font-weight: bold;
  font-family: sans-serif;
  transform: rotate(15deg);
}

/* Exclamation annotation */
.handwritten.exclaimed::before {
  content: '!';
  position: absolute;
  right: -15px;
  top: -10px;
  color: #cc0000;
  font-weight: bold;
  font-family: sans-serif;
  transform: rotate(10deg);
}

/* Star annotation */
.handwritten.starred::before {
  content: '★';
  position: absolute;
  right: -15px;
  top: -5px;
  color: #ffcc00;
  transform: rotate(-15deg);
}

/* Checkmark annotation */
.handwritten.checked::before {
  content: '✓';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  color: #00aa00;
}

/* Cross annotation */
.handwritten.crossed-out::before {
  content: '✗';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  color: #aa0000;
}

/* Double underlined */
.handwritten.doubleUnderlined::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: rotate(-1deg);
  opacity: 0.6;
}

.handwritten.doubleUnderlined::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: rotate(1deg);
  opacity: 0.5;
}

/* Wavy underline */
.handwritten.wavyUnderlined::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 4px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="4"><path d="M0,2 Q5,0 10,2 T20,2" stroke="currentColor" fill="none" stroke-width="1"/></svg>');
  background-size: 20px 4px;
  background-repeat: repeat-x;
  opacity: 0.6;
}

/* Sidenote style */
.handwritten.sidenote {
  display: block;
  margin-left: 2rem;
  font-size: 0.875rem;
  color: #666;
  transform: rotate(-1deg);
}

.handwritten.sidenote::before {
  content: '— ';
  opacity: 0.5;
}

/* Footnote style */
.handwritten.footnote {
  font-size: 0.75rem;
  vertical-align: super;
  line-height: 0;
}

/* Margin note style */
.handwritten.margin {
  position: absolute;
  left: -80px;
  width: 70px;
  font-size: 0.75rem;
  text-align: right;
  transform: rotate(-5deg);
}

.handwritten.margin::before {
  content: '→ ';
  opacity: 0.5;
}

/* SVG Filter for ink bleed */
.handwritten svg {
  position: absolute;
  width: 0;
  height: 0;
}