html, body { height: 100%; }
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, .display-font {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
  font-feature-settings: "ss02";
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
@keyframes pulse-soft { 0%,100% { opacity: 0.55 } 50% { opacity: 0.9 } }
.skeleton { animation: pulse-soft 1.6s ease-in-out infinite; }
.num-trans { transition: color 0.3s ease-out; }
.bar-fill { transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease-out; }
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(120, 251, 182, 0.6); }
  70%      { opacity: 0.7; transform: scale(1.35); box-shadow: 0 0 0 6px rgba(120, 251, 182, 0); }
}
.live-dot--on  { background: #59de9b; animation: live-pulse 2.2s ease-in-out infinite; }
.live-dot--off { background: #ffb4a9; animation: none; }
h1, h2, h3, h4, .display-font, .num { text-shadow: 0 0 0.5px currentColor; }
.chart-hover-el { opacity: 0; transition: opacity 0.12s ease-out; pointer-events: none; }
.chart-canvas:hover .chart-hover-el { opacity: 1; }
#chart-tooltip { transition: opacity 0.12s ease-out; }