Minimalstil für klare Lesbarkeit im Unterricht 
root {
  --gap: 1rem;
  --font: Corbel, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 16px1.6 var(--font);
  padding: var(--gap);
  max-width: 720px;
}

h1 {
  margin: 0 0 .5rem;
}

form {
  display: grid;
  gap: .5rem;
  margin: 1rem 0;
}

input, button {
  font: inherit;
  padding: .6rem .8rem;
}

button {
  cursor: pointer;
}

.card {
  border: 1px solid #ddd;
  border-radius: .5rem;
  padding: var(--gap);
  background: #fafafa;
}

.hint {
  color: #555;
  font-size: .95rem;
}

code {
  background: #f2f2f2;
  padding: .1rem .3rem;
  border-radius: .25rem;
}