body {
  margin: 0;
  font-family: sans-serif;
}

footer {
  text-align: center;
}

#bars {
  width: 100svw;
  height: 90svh;
  display: flex;
  column-gap: 1em;

  & .track {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    --bar-scale: 100;

    &#battery {
      justify-content: end;
    }

    & h2 {
      text-align: center;
    }

    & .bar {
      width: 100%;
      --amount: calc(var(--height) / var(--bar-scale));
      flex-basis: calc(var(--amount) * 100%);
      --background: black;
      color: contrast-color(var(--background));
      background: linear-gradient(220deg,color-mix(in oklab, var(--background), white 50%), var(--background));
      position: relative;
      display: grid;
      justify-content: center;
      align-content: center;

      &.☀️ {
        --background: yellow;
        
        & span {
          animation: calc(0.5s / var(--amount)) alternate-reverse linear infinite fizz;
        }
      }

      &.🔋 {
        --background: blue;
      }

      &.⚡ {
        --background: gray;
      }

      & span {
       height: 0;
       text-shadow: var(--background) 0 0 2px;
       z-index: 1;
       opacity: calc( min(1, var(--height) / 0.005));
       line-height: 0;
      }
    }
  }
}

@keyframes fizz {
  from {
    text-shadow: color-mix(in oklab, var(--background), currentColor 50%) 0 0 calc(2px + 3px * var(--amount));
  }
  to {
    text-shadow: var(--background) 0 0 calc(2px);
  }
}* {
  box-sizing: border-box;
}

body {
  margin: 0 1em;
  font-family: sans-serif;
  color-scheme: light dark;
  background: Canvas;
  color: CanvasText;
}

footer {
  text-align: center;
}

#bars {
  width: calc(100svw - 2em);
  height: 90svh;
  display: flex;
  column-gap: 1em;
  
  & .track {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    --bar-scale: 100;

    flex-shrink: 1;
      &#battery {
      justify-content: end;
    }

    & h2 {
      text-align: center;
      flex-grow: 1;
    }

    & .bar {
      width: 100%;
      --amount: calc(var(--height) / var(--bar-scale));
      flex-basis: calc(var(--amount) * 100%);
      --background: black;
      color: contrast-color(var(--background));
      background: linear-gradient(220deg,color-mix(in oklab, var(--background), white 50%), var(--background));
      position: relative;
      display: grid;
      justify-content: center;
      align-content: center;

          &.☀️ {
        --background: yellow;
        
        & span {
          animation: calc(0.5s / var(--amount)) alternate-reverse linear infinite fizz;
        }
      }

      &.🔋 {
        --background: blue;
      }

      &.⚡ {
        --background: gray;
      }

      & span {
       height: 0;
       text-shadow: var(--background) 0 0 2px;
       z-index: 1;
       opacity: calc( min(1, var(--height) / 0.005));
       line-height: 0;
      }
}
}
}

@keyframes fizz {
  from {
    text-shadow: color-mix(in oklab, var(--background), currentColor 50%) 0 0 calc(2px + 3px * var(--amount));
  }
  to {
    text-shadow: var(--background) 0 0 calc(2px);
  }
}