:root { color-scheme: light dark; }

body {
  font: 15px/1.5 system-ui, sans-serif;
  margin: 0;
  padding: 2rem 1rem;
}

main { max-width: 46rem; margin: 0 auto; }
h1 { font-size: 1.25rem; margin: 0 0 1.5rem; }

.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row label { font-weight: 600; }

input, button {
  font: inherit;
  padding: .4rem .7rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: .375rem;
  background: transparent;
  color: inherit;
}

button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }

ul { list-style: none; padding: 0; margin: 1.5rem 0; }
li { padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }

.name { font-family: ui-monospace, monospace; font-size: .9em; }
.tag { opacity: .65; }

.bar {
  height: .5rem;
  border-radius: .25rem;
  background: color-mix(in srgb, currentColor 15%, transparent);
  overflow: hidden;
  margin-top: .35rem;
}

.bar > span { display: block; height: 100%; width: 0; background: currentColor; transition: width .2s; }

.state { font-size: .85em; opacity: .75; }
.failed { color: #c0392b; }
.done { color: #1e8e3e; }

.banner {
  padding: .6rem .8rem;
  border-radius: .375rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, #c0392b 15%, transparent);
}

.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }

.chip {
  display: inline-flex;
  gap: .4rem;
  align-items: baseline;
  padding: .25rem .55rem;
  font-size: .85em;
  border-radius: 999px;
}

.chip:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.chip-name { opacity: .6; font-size: .9em; letter-spacing: .02em; }
.chip-value { font-family: ui-monospace, monospace; }