:root{
  --gray:#777;
  --dark:#444;
  --accent:#ffd;
}

*{box-sizing:border-box;}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.4;
  color:#222;
  background:#f7f7f7;
  padding:16px;
}

.container{
  max-width:760px;
  margin:0 auto;
  background:white;
  border-radius:10px;
  padding:24px 24px 32px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

h1{ font-size:42px; margin:.2rem 0 1rem; }

.level-box{
  border:2px solid #cfcfcf;
  padding:16px 18px;
  border-radius:6px;
  display:flex;
  align-items:center;
  gap:28px;
}
.level-box legend{ padding:0 8px; }

.radio{ display:flex; align-items:center; gap:8px; font-size:22px; }

.btn{
  display:block;
  width:100%;
  padding:10px 14px;
  margin:14px 0 6px;
  border:0;
  border-radius:6px;
  background:linear-gradient(#9b9b9b,#6e6e6e);
  color:#fff;
  font-size:20px;
  letter-spacing:.3px;
  cursor:pointer;
  box-shadow: inset 0 0 0 2px #4c4c4c, inset 0 0 0 6px #7e7e7e;
}
.btn:active{ transform: translateY(1px); }

.subhead{ font-weight:500; margin:16px 0 8px; }

.target{
  min-height:44px;
  background:var(--accent);
  border-radius:3px;
  padding:8px 10px;
  font-size:22px;
  border:1px solid #e4e4b0;
}

.typed{
  width:100%;
  padding:8px 10px;
  font-size:20px;
  border-radius:3px;
  border:1px solid #ccc;
}

.result{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-top:14px;
}

.emoji{
  width:140px;
  height:auto;
  display:none;
}

.message{
  font-size:18px;
  white-space:pre-wrap;
}