/* The meter's screen, used for the tagline. Backlit LCD with dark segments.
   Keyframes stay last in this file. */
.ms {
    --ms-glass: #A9B69A; --ms-lit: #C8F25C; --ms-ink: #14200E; --ms-ghost: rgba(20,32,14,.07); --ms-halo: rgba(190,245,90,.55);
    display: block; padding: .5rem .5rem .375rem; background: linear-gradient(150deg, #F2F3EF, #CFD1CB);
    border-radius: .625rem; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 30px -14px rgba(0,0,0,.55);
    width: 100%; max-width: 30rem;
}
.ms-glass {
    position: relative; display: block; overflow: hidden; isolation: isolate; padding: .375rem .625rem .5rem; border-radius: .25rem;
    background: var(--ms-glass); box-shadow: 0 0 0 1px #59644F inset, 0 2px 5px rgba(0,0,0,.35) inset;
}
.ms-light { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 40% 40%, #E2FB83, var(--ms-lit) 60%, #A6D63E); }
.ms-tags {
    display: flex; justify-content: space-between; color: var(--ms-ink); opacity: .72;
    font: 800 .625rem/1.3 Inter, Arial, sans-serif; letter-spacing: .08em;
}
.ms-face { display: block; width: 100%; height: auto; margin-top: .125rem; overflow: visible; fill: none; stroke-width: 3.8; stroke-linecap: round; }
.ms-ghost { stroke: var(--ms-ghost); }
.ms-word { stroke: var(--ms-ink); }
.ms-leds { display: flex; justify-content: center; gap: 1.5rem; margin: .375rem .25rem 0; padding: .1875rem; background: #17191B; border-radius: 999px; }
.ms-leds i { display: block; width: 1.25rem; height: .1875rem; border-radius: 999px; background: #3B3F3D; }
.ms-leds i:first-child { background: #4DFF88; box-shadow: 0 0 8px #4DFF88; }

.ms { filter: drop-shadow(0 0 20px var(--ms-halo)); }

/* Several words: the screen steps through them, catching for a moment like a tired backlight on each change. */
.ms--cycle .ms-word { opacity: 0; animation: ms-step 9s linear infinite; }
.ms--cycle .ms-word:nth-of-type(3) { animation-delay: 3s; }
.ms--cycle .ms-word:nth-of-type(4) { animation-delay: 6s; }
.ms--cycle .ms-light { animation: ms-catch 3s linear infinite; }
.is-off .ms--cycle .ms-word, .is-off .ms--cycle .ms-light { animation-play-state: paused; }

/* The tagline in the footer. */
.tf-signoff-screen { max-width: 21rem; margin-top: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
    .ms--cycle .ms-word { animation-name: ms-step-plain; }
    .ms--cycle .ms-light { animation: none; }
}

@keyframes ms-step { 0% { opacity: 0; } .8% { opacity: 1; } 1.6% { opacity: .25; } 2.8% { opacity: 1; } 32% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes ms-step-plain { 0%, 33.2% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes ms-catch { 0% { opacity: .35; } 2.4% { opacity: 1; } 4.8% { opacity: .55; } 8.4%, 100% { opacity: 1; } }