<details>
      <summary>Do you want to know more?</summary>
      <p>I absolutely positively definitively do.</p>
    </details>

summary::marker {
  content: "🤐 ";
  font-size: 1.2rem;
}

details[open] summary::marker {
  content: "😮 ";
}

/* base styles */
* {
  box-sizing: border-box;
  margin: 0;
}

html {
  color-scheme: dark light;
}

body {
  width: 100%;
  height: 100dvh;

  font-family: system-ui, sans-serif;
  font-size: 1.2rem;

  display: grid;
  place-items: center;
}

details {
  width: 20rem;
}

summary {
  cursor: pointer;
}