/* keep your background + colours, flattened (no nesting) */
html { color-scheme: light; }
body { background-size:18px 18px; background-position:0 0; background-color:#f7fafc;
       background-image:radial-gradient(rgba(0,0,0,0.30) 1px, transparent 1px); color:#1f2937; }

/* htmx swap transitions for fading content in/out */
.htmx-added { opacity: 0; }
.htmx-settling .htmx-added { opacity: 1; transition: opacity 300ms ease-in-out; }
.htmx-swapping { opacity: 0; transition: opacity 300ms ease-in-out; }

.purple {
  color: #8a38daff!important;
}

.fade-in.htmx-added {
  opacity: 0;
}
.fade-in {
  opacity: 1;
  transition: opacity .1s ease-out;
}