html {
  color-scheme: dark;
}

body {
  background: #101214;
}
.point-btn {
  font-size: 1.35rem;
  font-weight: 700;
}
#score {
  line-height: 1.1;
  --score-intensity: 0;
  --score-hue: 210;
  background: linear-gradient(
    135deg,
    hsl(var(--score-hue) 78% calc(62% + var(--score-intensity) * 10%)),
    hsl(calc(var(--score-hue) + 26) calc(68% + var(--score-intensity) * 24%) calc(54% + var(--score-intensity) * 10%))
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background 300ms ease;
}

#score[data-score-direction="positive"] {
  --score-hue: 145;
}

#score[data-score-direction="negative"] {
  --score-hue: 4;
}

.score-scale {
  --score-position: 50%;
  --score-marker: #8b98a7;
  margin-top: 1.5rem;
}

.score-scale-track {
  position: relative;
  height: 8px;
  border: 1px solid #4c5560;
  border-radius: 999px;
  background: linear-gradient(90deg, #a32c42, #626a75 50%, #18a878);
}

.score-scale-zero {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 1px;
  background: #c1c7cf;
}

.score-scale-marker {
  position: absolute;
  top: 50%;
  left: var(--score-position);
  width: 18px;
  height: 18px;
  border: 3px solid #101214;
  border-radius: 50%;
  background: var(--score-marker);
  box-shadow: 0 0 0 2px var(--score-marker);
  transform: translate(-50%, -50%);
  transition: left 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.score-scale[data-score-direction="positive"] {
  --score-marker: #39e09b;
}

.score-scale[data-score-direction="negative"] {
  --score-marker: #ff5a70;
}

.score-scale-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.55rem;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  font-weight: 700;
}
.transaction-positive {
  border-left: 4px solid var(--bs-success);
}
.transaction-negative {
  border-left: 4px solid var(--bs-danger);
}
@media (display-mode: standalone) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}