* {
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  -webkit-user-select: none;
  user-select: none;
}

*::selection {
  background: transparent;
}

:root {
  --gauge-scale: 0.8;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: #34414c;
  color: #e2cfea;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud {
  display: flex;
  align-items: center;
  height: calc(120px * var(--gauge-scale) + 12px);
  padding: 0 10px;
  background: #252b33;
  border-radius: 10px;
  border: 2px solid #252b33;
  box-shadow: 0 2px 50px rgba(0, 0, 0, 0.4);
  transition: ease-out 0.3s;
}

.hud:hover {
  box-shadow: 0 2px 50px rgba(0, 0, 0, 0.5);
}

.divider {
  width: 2px;
  background-color: #7a8b98;
  height: 80%;
  opacity: 0.3;
  margin: 0 0 0 3px;
  flex-shrink: 0;
}

.slob,
.slob * {
  user-select: none;
}

.slob {
  transition: ease 0.15s;
  transform: scale(var(--gauge-scale));
  margin: calc(120px * (var(--gauge-scale) - 1) / 2) calc(90px * (var(--gauge-scale) - 1) / 2);
  position: relative;
  width: 90px;
  height: 120px;
  flex-shrink: 0;
}

.slob.is-interacting {
  cursor: ns-resize;
}

.slob-label {
  position: absolute;
  font-family: sans-serif;
  color: #f1f3f5;
  font-size: 18px;
  text-align: center;
  bottom: 2px;
  width: 90px;
  transition: ease 0.4s;
}

.slob.is-interacting .slob-label {
  color: #7a8b98;
}

.slob-label-ancillary {
  position: absolute;
  top: 100px;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: ease 0.3s;
}

.slob.is-interacting .slob-label-ancillary {
  top: -20px;
}

.slob .slob-read-out {
  position: absolute;
  text-align: center;
  top: 47px;
  left: 0;
  width: 100%;
  margin-top: -16px;
  font-size: 23px;
  font-family: sans-serif;
  z-index: 5;
  color: #fff;
  cursor: ns-resize;
  transition: ease-in 0.15s;
  pointer-events: none;
}

.slob .arrow {
  display: none;
  z-index: 4;
  pointer-events: none;
}

.slob:hover .arrow,
.slob.is-interacting .arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  position: absolute;
  opacity: 0.2;
  transition: all 0.25s ease;
}

.slob .arrow.up {
  top: 30px;
}

.slob .arrow.down {
  bottom: 30px;
}

.slob.is-interacting .arrow {
  opacity: 0.5;
}

.slob:hover .arrow.up,
.slob.is-interacting .arrow.up {
  top: 25px;
  left: 50%;
  margin-left: -4px;
  transform: rotate(-135deg);
}

.slob:hover .arrow.down,
.slob.is-interacting .arrow.down {
  bottom: 25px;
  left: 50%;
  margin-left: -4px;
  transform: rotate(45deg);
}

.outside-container {
  background: #252b33;
  width: 89px;
  height: 89px;
  position: absolute;
  top: 0.5px;
  left: 0.5px;
  border-radius: 50%;
  transition: ease-in 0.15s;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
}

.slob.is-interacting .outside-container {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}

.outside {
  cursor: ns-resize;
  position: absolute;
  width: 90px;
  height: 90px;
  background: rgba(19, 22, 26, 0.6);
  clip-path: circle(46% at 50% 50%);
}

.inside-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: #f06c21;
  z-index: 2;
  pointer-events: none;
}

.inside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: #f06c21;
  z-index: 0;
  pointer-events: none;
}

.inside-ring {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: #13161a;
  clip-path: circle(46% at 50% 50%);
  z-index: 1;
  pointer-events: none;
}

.vue-scrubber {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 3;
  font-size: 15px;
  text-align: center;
  border: 0;
  cursor: ns-resize;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-feature-settings: "lnum" 1;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.vue-scrubber::selection {
  background: transparent;
  color: transparent;
}

.vue-scrubber-circle {
  width: 100px;
  height: 100px;
  border-radius: 100px;
}

.vue-scrubber:hover,
.vue-scrubber:focus {
  outline: 0;
  box-shadow: none;
}