/* Small custom layer on top of Tailwind CDN. */
:root { color-scheme: light; }
html, body { -webkit-font-smoothing: antialiased; }

/* animated value bars */
.bar-track { height: 8px; border-radius: 9999px; background: #eef2f7; overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, #818cf8, #4f46e5);
  width: 0; transition: width .9s cubic-bezier(.2,.8,.2,1);
}
.bar-fill.neg { background: linear-gradient(90deg, #fca5a5, #ef4444); }

/* number count-up doesn't need JS easing; keep transitions subtle */
.fade-in { animation: fade .5s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }

/* range slider styling */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 9999px; background: #e2e8f0; outline: none; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; height: 20px; width: 20px; border-radius: 9999px;
  background: #4f46e5; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(79,70,229,.4); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  height: 20px; width: 20px; border-radius: 9999px; background: #4f46e5; border: 3px solid #fff; cursor: pointer;
}