.emotion-icon svg {
  overflow: visible;
}

.face-outline {
  fill: #fff;
  stroke: #b9d4fa;
  stroke-width: 3;
}

.face-dot {
  fill: #1677ff;
}

.face-line {
  fill: none;
  stroke: #1677ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: d 180ms ease, opacity 180ms ease;
}

.face-line.subtle {
  opacity: .75;
  stroke-width: 2.5;
}

.signal-lights {
  gap: 7px;
}

.signal-light {
  opacity: .28;
  transform: scale(.88);
  transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.signal-light.push-level-1 {
  background: #16c784;
}

.signal-light.push-level-2 {
  background: #78c850;
}

.signal-light.push-level-3 {
  background: #f2c94c;
}

.signal-light.push-level-4 {
  background: #f2994a;
}

.signal-light.push-level-5 {
  background: #eb5757;
}

.signal-light.selected {
  opacity: 1;
  transform: scale(1.16);
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent), 0 3px 10px rgba(30, 65, 105, .14);
}

.signal-light.push-level-1.selected {
  box-shadow: 0 0 0 4px rgba(22, 199, 132, .16), 0 3px 10px rgba(30, 65, 105, .14);
}

.signal-light.push-level-2.selected {
  box-shadow: 0 0 0 4px rgba(120, 200, 80, .16), 0 3px 10px rgba(30, 65, 105, .14);
}

.signal-light.push-level-3.selected {
  box-shadow: 0 0 0 4px rgba(242, 201, 76, .18), 0 3px 10px rgba(30, 65, 105, .14);
}

.signal-light.push-level-4.selected {
  box-shadow: 0 0 0 4px rgba(242, 153, 74, .17), 0 3px 10px rgba(30, 65, 105, .14);
}

.signal-light.push-level-5.selected {
  box-shadow: 0 0 0 4px rgba(235, 87, 87, .16), 0 3px 10px rgba(30, 65, 105, .14);
}

.thermometer-fill {
  background: var(--temperature-color, #f2c94c) !important;
  transition: height 220ms ease, background-color 220ms ease;
}

.thermometer::after {
  background: var(--temperature-color, #f2c94c) !important;
  transition: background-color 220ms ease;
}

.temperature-display strong {
  color: var(--temperature-color, #f2c94c) !important;
  transition: color 220ms ease;
}

.metric-icon-interest {
  background: #eef5ff;
}

.metric-icon-interest svg {
  width: 28px;
  height: 28px;
  display: block;
}

.interest-outline,
.interest-line {
  fill: none;
  stroke: #1677ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.interest-dot {
  fill: #1677ff;
  stroke: none;
}

.metric-dot {
  transition: background-color 160ms ease, transform 160ms ease;
}

.metric-dot.on {
  transform: scaleX(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .face-line,
  .signal-light,
  .thermometer-fill,
  .thermometer::after,
  .temperature-display strong,
  .metric-dot {
    transition: none;
  }
}