:root {
  color-scheme: light;
  font: 16px/1.5 system-ui, sans-serif;
  color: #172721;
  background: #f0f5f2;
}

body { margin: 0; }
main { max-width: 38rem; margin: auto; padding: 1.25rem; }
h1, h2, p { margin: 0 0 0.75rem; }
h2 { font-size: 1.125rem; }
section {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #cbd9d0;
  border-radius: 0.75rem;
  background: white;
}

button {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: inherit;
  background: #f0f5f2;
  border: 1px solid #a6bbb0;
  border-radius: 0.4rem;
}

button:disabled { opacity: 0.5; }
button[aria-current="true"] { background: #d3e9dc; border-color: #356d53; }
.controls { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.toggle { display: flex; align-items: center; min-height: 44px; }
.toggle input { margin-right: 0.5rem; }
#current, #library button { overflow-wrap: anywhere; }
#progress { display: block; width: 100%; margin: 0.9rem 0 0.4rem; }
.time { font-variant-numeric: tabular-nums; }
#import-status { margin-top: 0.75rem; }
#player-status:empty, #library:empty { display: none; }
#player-status { margin: 0.5rem 0 0; }
#library { list-style: none; margin: 0; padding: 0; }
#library li + li { margin-top: 0.4rem; }
#library button { width: 100%; text-align: left; }