:root {
  color-scheme: light;
  font-family: system-ui, "Microsoft YaHei", sans-serif;
  color: #152b33;
  background: #eaf2f1;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: 12vh 1rem 2rem; }
main {
  width: min(100%, 31rem);
  margin: auto;
  padding: clamp(1.4rem, 6vw, 2.5rem);
  background: white;
  border-radius: 1rem;
  border: 1px solid #cddfdd;
  box-shadow: 0 12px 40px #12382c16;
}
.eyebrow { color: #075f54; font-weight: 700; letter-spacing: .06em; }
h1 { font-size: clamp(1.7rem, 5vw, 2.2rem); margin: .5rem 0; }
.description, #status { line-height: 1.65; }
#status {
  background: #edf5f4;
  border-left: .22rem solid #2f8177;
  padding: .65rem .9rem;
  min-height: 2.6rem;
}
form { display: grid; gap: .75rem; }
label { font-weight: 650; }
.challenge { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
img { border: 1px solid #cad9d6; border-radius: .25rem; }
button, input {
  min-height: 2.75rem;
  border: 1px solid #a8bdb9;
  border-radius: .45rem;
  padding: .55rem .8rem;
  font: inherit;
}
button { color: white; background: #075f54; border-color: #075f54; font-weight: 650; cursor: pointer; }
button.secondary { color: #075f54; background: white; }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid #327dbe; outline-offset: 2px; }