:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #202124;
  background: #f7f7f5;
}

* { box-sizing: border-box; }

body { margin: 0; }

main {
  width: min(680px, calc(100% - 40px));
  margin: 64px auto;
}

header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

h1, h2, p { margin: 0; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; margin-bottom: 24px; }
header p, .reset { color: #777; font-size: .82rem; }
header p { margin-top: 6px; }
#updated { margin-top: 4px; }

button {
  border: 1px solid #d4d4d0;
  border-radius: 7px;
  padding: 7px 12px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
button:disabled { cursor: wait; opacity: .5; }

section {
  padding: 28px 0;
  border-top: 1px solid #deded9;
}

article + article { margin-top: 24px; }
.row { display: flex; justify-content: space-between; gap: 16px; }
.row strong { font-size: .92rem; font-weight: 600; }
.row span { font-variant-numeric: tabular-nums; }

.track {
  height: 8px;
  overflow: hidden;
  margin: 9px 0 8px;
  border-radius: 999px;
  background: #dfdfdb;
}

.bar { height: 100%; border-radius: inherit; background: #4e7258; }
.error { color: #a33; font-size: .9rem; }

@media (prefers-color-scheme: dark) {
  :root { color: #eee; background: #171817; }
  section { border-color: #383a38; }
  button { border-color: #494b49; }
  .track { background: #343634; }
  .bar { background: #86b492; }
  header p, .reset { color: #aaa; }
}