/* Static illustration from the tracker frontend's V100Device component. */
.v100-device {
  position: relative;
  display: block;
  width: 140px;
  max-width: 100%;
  aspect-ratio: 1.65;
  flex-shrink: 0;
  isolation: isolate;
}
.v100-shadow {
  position: absolute; inset: auto 9% -2% 9%; height: 13%; border-radius: 50%;
  background: #11182726; filter: blur(5px); z-index: -1;
}
.v100-housing {
  position: absolute; inset: 26% 2% 1%; overflow: hidden;
  border-radius: 12% 12% 36% 36% / 20% 20% 22% 22%;
  background: linear-gradient(100deg, #babbb8 0%, #797c79 20%, #c3c4bc 47%, #8c8e88 75%, #c5c6c1 100%);
  box-shadow: inset 0 -3px 4px #494b4b66, inset 0 2px 3px #f5f5f4bb;
}
.v100-contour {
  position: absolute; width: 64%; height: 110%; top: -35%;
  border-bottom: 5px solid #d1d2cc55;
  box-shadow: 0 4px 5px #4b4d4833;
  border-radius: 0 0 45% 45%;
}
.v100-contour-left { left: -29%; transform: rotate(36deg); }
.v100-contour-right { right: -29%; transform: rotate(-36deg); }
.v100-base-seam {
  position: absolute; inset: auto 3% 12%; height: 17%;
  border-bottom: 1px solid #42454188; border-radius: 0 0 48% 48%;
}
.v100-red-band {
  position: absolute; inset: 13% 0 auto; height: 34%;
  border-radius: 11% 11% 48% 48% / 62% 62% 17% 17%;
  background: linear-gradient(100deg, #a44845, #8e2f2a 28%, #9f3d37 60%, #a04c48);
  box-shadow: inset 0 5px 6px #dc8b8044, inset 0 -5px 4px #631b1b55;
}
.v100-red-band::after {
  content: ''; position: absolute; inset: 0 3% 20%;
  border-bottom: 2px solid #c6736744; border-radius: 0 0 50% 50%;
}
.v100-cap {
  position: absolute; inset: 0 8% auto; height: 22%;
  border-radius: 50% 50% 14% 14% / 48% 48% 18% 18%;
  background: linear-gradient(#dededc, #c8c8c6 55%, #ababaa);
  box-shadow: inset 0 2px 4px #f3f3f088, 0 1px 1px #5b5b5b44;
  clip-path: polygon(8% 0, 92% 0, 100% 95%, 85% 100%, 15% 100%, 0 95%);
}
.v100-panel {
  position: absolute; left: 36%; top: 61%; width: 28%; height: 31%;
  box-sizing: border-box; border: 3px solid #891e13; border-radius: 20%;
  background: linear-gradient(120deg, #555553, #383a39 65%, #4e504d);
  box-shadow: 0 0 0 1px #414a43, inset 0 1px 3px #121414aa;
}
.v100-symbol { position: absolute; width: 17%; height: 26%; color: #a6a8a4; }
.v100-radio { left: 8%; top: 15%; }
.v100-satellite { right: 8%; top: 15%; }
.v100-battery { left: 9%; bottom: 13%; }
.v100-bluetooth { right: 8%; bottom: 13%; }
.v100-center {
  position: absolute; inset: 26% 31% 24%; display: grid; place-items: center;
  border-radius: 30%; background: linear-gradient(#383a38, #484a46);
  box-shadow: inset 0 2px 3px #1119, 0 0 0 2px #25272588;
}
.v100-pin { width: 54%; height: 69%; }