:root { --background: #1d2021; --text: #f9f5d7; --progress-bar-outline: #b16286 solid 4px; --progress-bar-fill: #b16286; }
@media (prefers-color-scheme: light) { :root { --background: #f9f5d7; --text: #1d2021; } }
html, body { min-height: 100%; display: flex; justify-content: center; align-items: center; margin: 0 auto; }
body { background: var(--background); color: var(--text); }
main { max-width: 50rem; padding: 2rem; margin: auto; }
.centered-div { text-align: center; }
.hidden { display: none; }
#status { font-variant-numeric: tabular-nums; }
#progress { display: block; width: min(20rem, 90%); height: 2rem; border-radius: 1rem; overflow: hidden; margin: 1rem auto 2rem; outline-offset: 2px; outline: var(--progress-bar-outline); }
.bar-inner { background: var(--progress-bar-fill); height: 100%; width: 0; }
@media (prefers-reduced-motion: no-preference) { .bar-inner { transition: width .25s ease-in; } }