:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #10172a; color: #f5f7ff; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; }
main { box-sizing: border-box; width: min(100%, 28rem); padding: 1.5rem; text-align: center; }
.brand { color: #b3c5ff; letter-spacing: .2em; font-weight: 700; }
.avatar { display: grid; place-items: center; width: 6rem; aspect-ratio: 1; margin: 1rem auto; border-radius: 50%; background: #3448a1; font-size: 2rem; font-weight: 800; }
time, label, meter { display: block; margin: .65rem auto; }
time { font-variant-numeric: tabular-nums; }
meter { width: 8rem; }
button { border: 0; border-radius: 1.5rem; min-height: 44px; padding: .6rem .8rem; color: inherit; background: #354889; font: inherit; }
button:disabled { opacity: .5; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
#end { background: #9f283c; }
#error { color: #ffb9bd; }