:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body {
  font-family: system-ui, sans-serif;
  max-width: 640px;
  margin: 2rem auto;
  padding: 0 1rem;
  background: Canvas;
  color: CanvasText;
}

header { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
header h1 { margin: 0; }
header p { flex-basis: 100%; margin: 0 0 1rem; }

main > section { margin-bottom: 1.5rem; }
label { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 1rem; }
input[type="range"] { width: 12rem; }
input[type="number"] { width: 4rem; }
button, select { font: inherit; }
h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
p { margin: 0.25rem 0; }