:root {
  --color-black: 0, 0, 0;
  --color-red: 207, 76, 41;
  --color-yellow: 236, 197, 97;
  --color-green: 40, 181, 110;
  --base-background-color: color-mix(in srgb, #000 75%, #fff);
  --base-text-color: color-mix(in srgb, #000 10%, #fff);
  --strong-text-color: #fff;
  --muted-text-color: color-mix(in srgb, #000 50%, #fff);
  --base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --base-transition-speed: 500ms;
  --fast-transition-speed: calc(var(--base-transition-speed) * 0.5);
  --slow-transition-speed: calc(var(--base-transition-speed) * 2);
  --slug-transition-speed: calc(var(--base-transition-speed) * 8);
  --bulb-size: 50vmin;
  --bulb-shadow-size: 150vmax;
  --bulb-gutter: 6vmin;
  --light-height: calc(var(--bulb-size) * 3 + var(--bulb-gutter) * 2);
  --animation-pulse-duration: 5s;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline-width: 0;
}

html {
  font-family: var(--base-font-family);
  font-weight: 300;
  line-height: 1.4;
}

body {
  background-color: var(--base-background-color);
  color: var(--base-text-color);
  font-size: 1em;
}

ol,
ul {
  padding-left: 1rem;
}

a {
  color: currentColor;
}
a:focus, a:hover {
  color: var(--strong-text-color);
}

@keyframes pulse {
  50% {
    transform: scale(0.8);
  }
}
.bulb {
  height: var(--bulb-size);
  position: relative;
  width: var(--bulb-size);
}
.bulb__glow {
  animation: pulse var(--animation-pulse-duration) infinite;
  display: block;
  height: var(--bulb-shadow-size);
  left: 50%;
  margin-left: calc(var(--bulb-shadow-size) * -0.5);
  margin-top: calc(var(--bulb-shadow-size) * -0.5);
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: scale(0.5);
  transition: transform var(--slow-transition-speed), opacity var(--slow-transition-speed);
  transition-delay: var(--fast-transition-speed);
  width: var(--bulb-shadow-size);
  z-index: 2;
}
.bulb--yellow .bulb__glow {
  z-index: 1;
}
.bulb__disc {
  background-color: rgba(var(--color-black), 0.2);
  border-radius: 50%;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: background-color var(--fast-transition-speed);
  z-index: 3;
}
.bulb__text {
  font-size: calc(var(--bulb-size) / 7);
  font-weight: 800;
  left: calc(var(--bulb-size) * 0.5);
  line-height: 1;
  margin-left: calc(var(--bulb-size) * -0.5);
  margin-top: calc(var(--bulb-size) / 7 * -0.5);
  opacity: 0;
  position: absolute;
  text-align: center;
  text-transform: lowercase;
  top: calc(var(--bulb-size) * 0.5);
  transition: opacity var(--base-transition-speed);
  width: var(--bulb-size);
  z-index: 4;
}
[data-failing] .bulb--red .bulb__glow {
  background-image: radial-gradient(ellipse at center, rgba(var(--color-red), 0.9) 10%, rgba(var(--color-red), 0.6) 20%, rgba(var(--color-red), 0.3) 40%, rgba(var(--color-red), 0) 70%);
  opacity: 1;
  transform: scale(1);
}
[data-failing] .bulb--red .bulb__disc {
  background-color: rgb(var(--color-red));
}
[data-failing] .bulb--red .bulb__text {
  opacity: 1;
}
[data-building] .bulb--yellow .bulb__glow {
  background-image: radial-gradient(ellipse at center, rgba(var(--color-yellow), 0.9) 10%, rgba(var(--color-yellow), 0.6) 20%, rgba(var(--color-yellow), 0.3) 40%, rgba(var(--color-yellow), 0) 70%);
  opacity: 1;
  transform: scale(1);
}
[data-building] .bulb--yellow .bulb__disc {
  background-color: rgb(var(--color-yellow));
}
[data-building] .bulb--yellow .bulb__text {
  opacity: 1;
}
.bulb--yellow .bulb__glow {
  animation-delay: calc(var(--animation-pulse-duration) * -0.5);
}
[data-passing] .bulb--green .bulb__glow {
  background-image: radial-gradient(ellipse at center, rgba(var(--color-green), 0.9) 10%, rgba(var(--color-green), 0.6) 20%, rgba(var(--color-green), 0.3) 40%, rgba(var(--color-green), 0) 70%);
  opacity: 1;
  transform: scale(1);
}
[data-passing] .bulb--green .bulb__disc {
  background-color: rgb(var(--color-green));
}
[data-passing] .bulb--green .bulb__text {
  opacity: 1;
}

.light {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}
.light__box {
  display: flex;
  flex-direction: column;
  height: var(--light-height);
  justify-content: space-between;
  left: calc(50vw - var(--bulb-size) / 2);
  position: absolute;
  top: calc(50vh - var(--light-height) / 2);
  transition: margin-top var(--base-transition-speed);
  width: var(--bulb-size);
}
[data-failing] .light__box {
  margin-top: calc(var(--bulb-size) + var(--bulb-gutter));
}
[data-failing][data-building] .light__box {
  margin-top: calc((var(--bulb-size) + var(--bulb-gutter)) * 0.5);
}
[data-passing] .light__box {
  margin-top: calc((var(--bulb-size) + var(--bulb-gutter)) * -1);
}
[data-passing][data-building] .light__box {
  margin-top: calc((var(--bulb-size) + var(--bulb-gutter)) * -0.5);
}
[data-failing][data-passing] .light__box {
  margin-top: 0;
  transform: scale(0.75);
}

.messages {
  left: 5vmin;
  position: absolute;
  top: 5vmin;
  z-index: 10;
}
.messages__footer {
  font-size: 0.8em;
  opacity: 0.5;
}
.messages__footer :first-child {
  margin-top: 0;
}

.message {
  font-size: 0;
  overflow: hidden;
  padding-bottom: 0.5em;
  transition: font-size var(--base-transition-speed), opacity var(--base-transition-speed);
}
.message .emoji {
  height: 1em;
  width: auto;
}
.message > * {
  margin-top: 0;
}
.message > :first-child {
  font-size: 1.5em;
  line-height: 1.2;
  margin-bottom: 0.25em;
}
[data-failing] .message--failure, [data-building] .message--building, [data-passing] .message--passing {
  font-size: 1em;
  opacity: 1;
}