* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; background:#1d2733; color:#e6eef6; }
body { display:flex; flex-direction:column; align-items:center; padding:20px; }
h1 { margin:0 0 12px 0; font-size:20px; }
canvas { background: linear-gradient(#87CEEB, #5DADE2); border-radius:8px; box-shadow: 0 6px 18px rgba(0,0,0,0.5); display:block; }
.hint { margin-top:8px; color:#cfe9ff; }

/* Scale canvas nicely on narrow screens */
@media (max-width:900px) {
  canvas { width:90vw; height:auto; }
}