:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-height: 100vh; background: #f4f7fb; color: #172033; transition: background 180ms ease; }
body.hit { background: #b00020; }
.container { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.card { width: min(680px, 100%); background: white; border-radius: 20px; box-shadow: 0 20px 60px rgb(23 32 51 / 12%); padding: 2rem; }
.badge { display: inline-block; margin: 0 0 1rem; padding: .35rem .7rem; border-radius: 999px; background: #eef2ff; color: #3730a3; font-weight: 700; font-size: .85rem; }
h1 { margin: 0 0 .75rem; }
.lede { color: #526070; }
form { display: grid; gap: .75rem; margin-top: 1.25rem; }
label { font-weight: 700; }
input { border: 1px solid #bac5d5; border-radius: 12px; font-size: 1rem; padding: .85rem 1rem; }
button { border: 0; border-radius: 12px; background: #1d4ed8; color: white; cursor: pointer; font-weight: 800; padding: .85rem 1rem; }
button:disabled { cursor: not-allowed; opacity: .6; }
.status { color: #526070; min-height: 1.5rem; }
.result { margin-top: 1.25rem; border-radius: 16px; background: #edf7ed; color: #14532d; font-weight: 800; padding: 1rem; }
.result.hit { background: #b00020; color: white; border: 3px solid #ffccd5; }
.result.miss { background: #edf7ed; color: #14532d; }