:root { color-scheme: light; font-family: system-ui, sans-serif; background: #f4f6f8; color: #18202b; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(760px, calc(100% - 32px)); margin: 48px auto; }
header, section { margin-bottom: 28px; }
h1 { margin: 4px 0 8px; font-size: clamp(2rem, 5vw, 3rem); }
h2 { margin: 0 0 16px; }
.eyebrow { color: #526581; font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
.lede, .hint, footer { color: #596579; line-height: 1.6; }
.room-list { display: grid; gap: 10px; }
.room-choice, .card { border: 1px solid #dce2e9; border-radius: 14px; background: white; }
.room-choice { width: 100%; padding: 16px; text-align: left; font-size: 1rem; }
.card { padding: clamp(18px, 4vw, 28px); box-shadow: 0 8px 24px #1720330a; }
label { display: grid; gap: 7px; margin: 16px 0; font-weight: 600; }
input:not([type=checkbox]), textarea { width: 100%; border: 1px solid #cbd3de; border-radius: 8px; padding: 11px; font: inherit; }
textarea { resize: vertical; line-height: 1.5; }
.toggle { display: flex; align-items: center; gap: 10px; }
button { border: 0; border-radius: 8px; background: #285fca; color: white; padding: 11px 16px; font: inherit; font-weight: 650; cursor: pointer; }
button.secondary { background: #e8edf4; color: #203149; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.preview { white-space: pre-wrap; background: #f1f4f8; border-radius: 8px; padding: 14px; }
.challenge { margin-top: 18px; padding: 14px; border-radius: 10px; background: #eef3fb; }
.challenge code { display: block; overflow-wrap: anywhere; margin: 10px 0; font-size: 1.1rem; font-weight: 700; }
#status { min-height: 1.5em; color: #394b63; }
details { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e0e5ec; }
summary { cursor: pointer; font-weight: 650; }
footer { border-top: 1px solid #dce2e9; padding-top: 18px; font-size: .9rem; }