.kitt-hud {
  position: absolute;
  z-index: 4;
  inset: 4% -2% 3%;
  pointer-events: none;
  color: #f3f3f4;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  text-align: left;
}

.kitt-hud::before,
.kitt-hud::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  border-color: rgba(255, 54, 69, .58);
  filter: drop-shadow(0 0 8px rgba(226, 28, 42, .25));
}

.kitt-hud::before { top: 8%; left: 3%; border-top: 1px solid; border-left: 1px solid; }
.kitt-hud::after { right: 2%; bottom: 5%; border-right: 1px solid; border-bottom: 1px solid; }

.kitt-hud-node {
  position: absolute;
  min-width: 184px;
  max-width: 245px;
  padding: 10px 12px 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-left-color: rgba(255, 54, 69, .72);
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(5, 6, 8, .9), rgba(8, 9, 11, .62));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 0 20px rgba(226, 28, 42, .04);
  backdrop-filter: blur(5px);
}

.kitt-hud-node--diagnostic { top: 10%; left: 1%; }
.kitt-hud-node--boost { left: 5%; bottom: 9%; }
.kitt-hud-node--scanner { top: 16%; right: 0; min-width: 166px; }

.kitt-hud-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #ff5b68;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1.3;
  text-transform: uppercase;
}

.kitt-hud-label::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ff3545;
  box-shadow: 0 0 9px rgba(255, 53, 69, .9);
  animation: kittHudPulse 2.4s ease-in-out infinite;
}

.kitt-hud-node strong {
  display: block;
  margin-top: 6px;
  color: #e2e2e5;
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.4;
  overflow-wrap: break-word;
  text-transform: uppercase;
}

.kitt-hud-progress,
.interface-load-track {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .12);
}

.kitt-hud-progress { margin-top: 9px; }

.kitt-hud-progress i,
.interface-load-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: linear-gradient(90deg, #73101a, #ff3545, #fff);
  box-shadow: 0 0 9px rgba(255, 53, 69, .75);
  animation: kittHudLoad 4.8s cubic-bezier(.55, .08, .42, .94) infinite;
}

.kitt-hud-dots { display: flex; gap: 5px; margin-top: 8px; }
.kitt-hud-dots i { width: 5px; height: 5px; border-radius: 50%; background: #ff3545; opacity: .28; animation: kittHudDot 1.8s ease-in-out infinite; }
.kitt-hud-dots i:nth-child(2) { animation-delay: .3s; }
.kitt-hud-dots i:nth-child(3) { animation-delay: .6s; }
.kitt-hud-dots i:nth-child(4) { animation-delay: .9s; }

.kitt-hud-reticle {
  position: absolute;
  top: 45%;
  left: 53%;
  width: 112px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: kittHudReticle 7s linear infinite;
}

.kitt-hud-reticle::before,
.kitt-hud-reticle::after { content: ""; position: absolute; background: rgba(255, 54, 69, .36); }
.kitt-hud-reticle::before { top: 50%; left: -15px; width: calc(100% + 30px); height: 1px; }
.kitt-hud-reticle::after { top: -15px; left: 50%; width: 1px; height: calc(100% + 30px); }

.interface-load {
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
}

.interface-load-label {
  color: #ff5260;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1.35;
  overflow-wrap: break-word;
  text-transform: uppercase;
  animation: kittHudPulse 2.8s ease-in-out infinite;
}

.interface-load-track { width: min(100%, 150px); }
.links a:nth-child(2) .interface-load-track i { animation-delay: 1.1s; }

@keyframes kittHudPulse { 0%, 100% { opacity: .48; } 50% { opacity: 1; } }
@keyframes kittHudDot { 0%, 100% { opacity: .22; transform: scale(.72); } 45% { opacity: 1; transform: scale(1); } }
@keyframes kittHudLoad { 0% { width: 8%; opacity: .55; } 58% { width: 82%; opacity: 1; } 84%, 100% { width: 100%; opacity: .34; } }
@keyframes kittHudReticle { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 1050px) {
  .kitt-hud { inset-inline: 1%; }
  .kitt-hud-node--diagnostic { left: 0; }
  .kitt-hud-node--scanner { right: 0; }
}

@media (max-width: 650px) {
  .kitt-hud { inset: 5% -2% 5%; }
  .kitt-hud::before,
  .kitt-hud::after { width: 36px; height: 36px; }
  .kitt-hud-node { min-width: 0; max-width: 148px; padding: 8px 9px; }
  .kitt-hud-node--diagnostic { display: none; }
  .kitt-hud-node--boost { left: 0; bottom: 3%; }
  .kitt-hud-node--scanner { top: 7%; right: 0; }
  .kitt-hud-label { font-size: .43rem; letter-spacing: .1em; }
  .kitt-hud-node strong { font-size: .46rem; }
  .kitt-hud-reticle { width: 72px; }
  .interface-load-label { font-size: .48rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kitt-hud *,
  .kitt-hud *::before,
  .kitt-hud *::after,
  .interface-load * { animation: none !important; }
  .kitt-hud-progress i,
  .interface-load-track i { width: 72%; }
  .kitt-hud-label::before,
  .kitt-hud-dots i,
  .interface-load-label { opacity: .82; }
}