.kitt-bar {
  --kitt-width: clamp(220px, 72vw, 620px);
  transform: scaleY(.6);
  width: var(--kitt-width);
  aspect-ratio: 8 / 1;
  position: relative;

  display: flex;
  gap: 0;
  overflow: hidden;
  margin: 0 auto 32px;

  background:
    linear-gradient(
      to bottom,
      #151515 0%,
      #050505 32%,
      #000 62%,
      #101010 100%
    );

  border-radius: clamp(7px, 1.4vw, 12px);

  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.52),
    0 4px 10px rgba(0, 0, 0, 0.42),
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -4px 8px rgba(0, 0, 0, 0.72),
    inset 0 0 clamp(8px, 2vw, 18px) rgba(255, 0, 60, 0.13),
    0 0 clamp(10px, 2.5vw, 22px) rgba(255, 0, 80, 0.1);
}

.kitt-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.035) 14%,
      rgba(255, 255, 255, 0) 42%
    );

  pointer-events: none;
}

.kitt-light {
  flex: 0 0 12.5%;
  height: 100%;
  position: relative;
  z-index: 0;
  top: 1px;

  background-image: url("/kitt-lights.png");
  background-repeat: no-repeat;
  background-size: 800% 100%;
  filter:
    saturate(2)
    hue-rotate(-10deg);
}

.kitt-light[data-level="0"] { background-position: 0% 0; }
.kitt-light[data-level="1"] { background-position: 14.2857% 0; }
.kitt-light[data-level="2"] { background-position: 28.5714% 0; }
.kitt-light[data-level="3"] { background-position: 42.8571% 0; }
.kitt-light[data-level="4"] { background-position: 57.1428% 0; }
.kitt-light[data-level="5"] { background-position: 71.4285% 0; }
.kitt-light[data-level="6"] { background-position: 85.7142% 0; }
.kitt-light[data-level="7"] { background-position: 100% 0; }