:root {
  color-scheme: light;
}

body {
  background-color: #f6f1e8;
  background-image:
    linear-gradient(rgba(16, 35, 63, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 35, 63, 0.05) 1px, transparent 1px),
    radial-gradient(circle at top left, rgba(29, 242, 117, 0.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(255, 122, 89, 0.08), transparent 26%);
  background-size: 28px 28px, 28px 28px, auto, auto;
}

.paper-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    radial-gradient(rgba(16, 35, 63, 0.18) 0.5px, transparent 0.5px),
    radial-gradient(rgba(16, 35, 63, 0.12) 0.5px, transparent 0.5px);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
}

.tilt-tag {
  transform: rotate(-3deg);
}

.tilt-card {
  transform: rotate(-1.1deg);
}

.tilt-card:nth-child(even) {
  transform: rotate(1deg);
}

.underline-accent {
  background-image: linear-gradient(transparent 62%, rgba(29, 242, 117, 0.9) 0);
}