* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background: #f0f4ff; color: #1f2937; }
.container { max-width: 640px; margin: 40px auto; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 24px; }
h1 { margin:0 0 12px; color:#111827; }
.story { margin-top:0; color:#374151; }
.challenge-box { background:#eef2ff; border-left: 4px solid #6366f1; border-radius:8px; padding:10px 14px; margin:12px 0 16px; }
.code { margin:0; background:#1e293b; color:#e2e8f0; padding:10px; border-radius:6px; font-size:0.9rem; white-space: pre-wrap; }
label { font-weight:600; display:block; margin-top:6px; }
input { width:100%; padding:10px; font-size:1rem; margin:8px 0 14px; border:1px solid #cbd5e1; border-radius:8px; outline:none; }
input:focus { border-color:#4f46e5; }
.buttons { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
button { border:none; border-radius:8px; padding:10px 14px; cursor:pointer; background:#4f46e5; color:white; font-weight:600; }
button:hover { background:#4338ca; }
.feedback { margin:10px 0; padding:10px; border-radius:8px; background:#f8fafc; border:1px solid #e2e8f0; color:#111827; }
.progress { margin-bottom:12px; font-weight:600; }
.badge { margin-top:10px; padding:10px; background:#ecfdf3; border:1px solid #86efac; border-radius:8px; color:#065f46; }
.hidden { display:none; }
.hint { margin-top:8px; padding:10px; border-radius:8px; border:1px dashed #2563eb; background:#eff6ff; color:#1d4ed8; }