<p>
	Color-scheme to use:
	<select name="color-scheme" id="color-scheme">
		<option value="light">light</option>
		<option value="dark">dark</option>
	</select>
</p>

<div id="demo">Use the dropdown to control the <code>color-scheme</code> applied to this element. The system colors adapt themselves to the chosen value.</div>

html {
	color-scheme: light dark;
}

#demo {
	color: CanvasText;
	background: canvas;
}

body:has(#color-scheme option[value="light"]:checked) #demo {
	color-scheme: light;
}
body:has(#color-scheme option[value="dark"]:checked) #demo{
	color-scheme: dark;
}






@layer reset {
  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    background: white;
  }

  ul[class] {
    list-style: none;
  }

  label {
    cursor: pointer;
  }

  button,
  input,
  textarea,
	select {
    font-family: inherit;
    font-size: inherit;
  }
	
	select {
		field-sizing: content;
		width: min-content;
	}
}

@layer baselayout {
  html {
    margin: auto;
    line-height: 1.5;
    font-size: 24px;
    font-family: "Syne", sans-serif;
    min-height: 100%;
    background: white;
  }

  body {
    width: 100%;
    max-width: 120ch;
    margin: 0 auto;
    min-height: 100dvh;
    padding: 2em;
    display: grid;
    place-content: center;
		text-align: center;
  }
	
	#demo {
		max-width: 90vw;
		text-wrap: balance;
	}

}