:root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: system-ui, sans-serif;
  max-width: clamp(320px, 90%, 1000px);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

progress[hidden] ~ label {
  display: none;
}

output {
  white-space: pre-wrap;
  word-wrap: break-word;
}