<details>
      <summary>
        What is answer to the ultimate question of life, the universe, and
        everything?
      </summary>
      <p>42.</p>

summary::marker {
  content: url('data:image/svg+xml,<svg height="1em" width="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M12 16.725L16.725 12 12 7.275 10.346 8.93l1.89 1.89h-4.96v2.36h4.96l-1.89 1.89zm0 7.087q-2.45 0-4.607-.93-2.156-.93-3.75-2.525-1.595-1.593-2.525-3.75Q.188 14.45.188 12q-.002-2.45.93-4.607t2.525-3.75q1.592-1.594 3.75-2.525Q9.55.188 12 .188q2.45 0 4.607.93 2.158.93 3.75 2.525 1.593 1.593 2.526 3.75.933 2.157.93 4.607-.004 2.45-.93 4.607-.93 2.157-2.526 3.75-1.597 1.594-3.75 2.526-2.154.932-4.607.93"/></svg>');
}

details[open] summary::marker {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='m12 16l4-4l-1.4-1.4l-1.6 1.6V8h-2v4.2l-1.6-1.6L8 12zm0 6q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22'/%3E%3C/svg%3E");
}

summary {
  cursor: pointer;
  list-style-position: outside;
  padding-inline-start: 0.5rem;
}

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

p {
  margin-block-start: 1rem;
  margin-inline-start: 0.5rem;
}