:root {
  color-scheme: dark;
  --bg: #09090b;
  --up: #34d399;
  --down: #fb7185;
}

* { box-sizing: border-box; }

body.font-sans {
  margin: 0;
  min-height: 100vh;
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(16, 185, 129, 0.08), transparent 55%),
    var(--bg);
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

button, input, select { font: inherit; }

.spark, .detail-chart { position: relative; height: 64px; }
.detail-chart { height: 240px; }

.nav-btn[aria-current="page"] {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
}

#toast[data-show="true"] { transform: translateY(0); opacity: 1; }

#pin:focus { outline: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.rise { animation: rise 0.35s ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.shake { animation: shake 0.28s ease; }