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;
  }

}