* { box-sizing: border-box; }
body { margin: 0; color: #111; background: #fff; font: 16px/1.5 system-ui, sans-serif; }
main { width: min(560px, calc(100% - 32px)); margin: 72px auto; }
h1 { margin: 0 0 8px; font-size: 24px; }
p { margin: 0 0 24px; }
form { display: flex; gap: 8px; }
label { flex: 1; }
input { width: 100%; margin-top: 4px; padding: 7px; border: 1px solid #999; border-radius: 3px; font: inherit; }
button { align-self: end; padding: 8px 12px; border: 1px solid #666; border-radius: 3px; background: #f5f5f5; color: inherit; font: inherit; }
output {
  display: block;
  margin-top: 40px;
  font-size: clamp(36px, 8vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.06em;
  overflow-wrap: anywhere;
}
@media (max-width: 430px) { form { display: block; } button { width: 100%; margin-top: 10px; } }