.modal-hidden {
    visibility: hidden;
}

.modal-visible {
    visibility: visible;
}

.glitch {
    color: orange;
}

.success {
    color: blue;
}

.critical {
    color: blue;
}

.critical:before {
    content: "✨";
}

.critical:after {
    content: "✨";
}

progress[value] {
    --w: calc(50vw); /* The width */
    --red-limit: calc(0.33 * var(--w)); /* The width */
    --orange-limit: calc(0.67 * var(--w)); /* The width */
    /* The background property */
    --b: /* static layers */ linear-gradient(#fff8, #fff0),
    repeating-linear-gradient(135deg, #0003 0 10px, #0000 0 20px),
        /* dynamic layers */ /* if < 30% "red" */ linear-gradient(red 0 0) 0 /calc(var(--red-limit) - 100%) 1px,
        /* if < 60% "orange" */ linear-gradient(orange 0 0) 0 /calc(var(--orange-limit) - 100%) 1px,
        /* else "green" */ green;
    width: calc(var(--w));
    height: 20px;
    background-color: lightgrey;
    border-radius: 50px;
    align-self: end;
}

progress[value]::-webkit-progress-bar {
    background-color: lightgrey;
    border-radius: 50px;
}

progress[value]::-webkit-progress-value {
    border-radius: 50px;
    background: var(--b);
}

progress[value]::-moz-progress-bar {
    border-radius: 50px;
    background: var(--b);
}