:root {
  --wabi-underline-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,8 C12,5 22,9 35,7 S55,4 72,8 S95,10 115,6 S138,3 158,7 S180,10 200,6 S222,3 242,8 S265,10 280,7 L298,6' fill='none' stroke='rgba(230,26,26,0.6)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --wabi-circle-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='60' cy='60' rx='52' ry='48' fill='none' stroke='rgba(230,26,26,0.45)' stroke-width='2' stroke-dasharray='4 2' transform='rotate(-2 60 60)'/%3E%3C/svg%3E");
  --wabi-arrow-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4,12.5 C8,11 13,13 16,11.5 M14,7 C15,9 17,11 16,11.5 C17,12 18,15 16,17' fill='none' stroke='rgba(230,26,26,0.55)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wabi-squiggle-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,6 Q10,2 20,6 T40,5 T60,7 T80,4 T100,6 T120,5 T140,7 T160,4 T180,6 T200,5 T220,7 T240,4 T260,6 T280,5 T300,7 T320,4 T340,6 T360,5 T380,7 T400,5' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --wabi-star-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8,1.5 L9.6,5.8 L14.2,6.1 L10.7,9.2 L11.8,14 L8,11.6 L4.2,14 L5.3,9.2 L1.8,6.1 L6.4,5.8 Z' fill='none' stroke='rgba(230,26,26,0.5)' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="light"] {
  --wabi-underline-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,8 C12,5 22,9 35,7 S55,4 72,8 S95,10 115,6 S138,3 158,7 S180,10 200,6 S222,3 242,8 S265,10 280,7 L298,6' fill='none' stroke='rgba(168,16,16,0.5)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --wabi-circle-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='60' cy='60' rx='52' ry='48' fill='none' stroke='rgba(168,16,16,0.35)' stroke-width='2' stroke-dasharray='4 2' transform='rotate(-2 60 60)'/%3E%3C/svg%3E");
  --wabi-arrow-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4,12.5 C8,11 13,13 16,11.5 M14,7 C15,9 17,11 16,11.5 C17,12 18,15 16,17' fill='none' stroke='rgba(168,16,16,0.45)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --wabi-squiggle-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,6 Q10,2 20,6 T40,5 T60,7 T80,4 T100,6 T120,5 T140,7 T160,4 T180,6 T200,5 T220,7 T240,4 T260,6 T280,5 T300,7 T320,4 T340,6 T360,5 T380,7 T400,5' fill='none' stroke='rgba(0,0,0,0.1)' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --wabi-star-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8,1.5 L9.6,5.8 L14.2,6.1 L10.7,9.2 L11.8,14 L8,11.6 L4.2,14 L5.3,9.2 L1.8,6.1 L6.4,5.8 Z' fill='none' stroke='rgba(168,16,16,0.4)' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wabi-underline {
  background-image: var(--wabi-underline-svg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 80% 8px;
  padding-bottom: 6px;
}

.wabi-circle {
  position: relative;
  display: inline-block;
}

.wabi-circle::after {
  content: '';
  position: absolute;
  inset: -12px -18px;
  background-image: var(--wabi-circle-svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.wabi-arrow {
  display: inline-flex;
  align-items: center;
}

.wabi-arrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: var(--wabi-arrow-svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 6px;
  flex-shrink: 0;
}

.wabi-squiggle-border {
  position: relative;
  border-top: none;
}

.wabi-squiggle-border::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 12px;
  background-image: var(--wabi-squiggle-svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.wabi-sketch-separator {
  display: block;
  width: 60%;
  max-width: 400px;
  height: 12px;
  margin: 24px auto;
  background-image: var(--wabi-squiggle-svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.wabi-texture::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: 0.018;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes wabi-pop-kf {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes wabi-wobble-kf {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(0.8deg); }
  75% { transform: rotate(-0.8deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .wabi-tilt-odd {
    transform: rotate(-0.4deg);
  }

  .wabi-tilt-even {
    transform: rotate(0.35deg);
  }

  .wabi-pop {
    animation: wabi-pop-kf 0.2s var(--bloom-spring, cubic-bezier(.34,1.56,.64,1));
  }

  .wabi-wobble {
    animation: wabi-wobble-kf 3s ease-in-out infinite;
  }
}