/* CSS controls how the page looks. */
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 32px 20px;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #f4f4f5;
  background: #15171b;
}
main { max-width: 560px; margin: 32px auto; }
.lesson { font-size: 12px; letter-spacing: 2px; color: #a9d7ff; }
h1 { font-size: clamp(30px, 7vw, 44px); line-height: 1.15; }
label { display: block; margin: 28px 0 8px; font-weight: 600; }
.controls { display: flex; gap: 12px; }
input, button { font: inherit; border-radius: 8px; padding: 12px 16px; }
input { width: 100%; min-width: 0; background: #fff; color: #15171b; border: 2px solid #b6bdc8; }
button { border: 2px solid #a9d7ff; background: #a9d7ff; color: #15171b; font-weight: 700; cursor: pointer; }
button:hover { background: #d1e9ff; }
input:focus-visible, button:focus-visible { outline: 3px solid #ffce73; outline-offset: 4px; }
#message { min-height: 52px; padding: 12px 0; color: #a9d7ff; }
aside { margin-top: 24px; padding: 20px; background: #23272e; border-radius: 12px; }
h2 { margin-top: 0; font-size: 19px; }
aside p { margin-bottom: 0; }