#demo{
  text-align:center;
}

#target{
  margin:0 auto;
  max-width:780px;
  text-align:left;

}
b{
  font-weight:bold;
}

.chat{
  padding: 1rem;
  border: 0 solid #d9d9e3;
  border-color: rgba(0,0,0,.1);
  border-bottom-width: 1px;
  font-family: Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  color:#374151;
}
.chat-in{
  padding:16px 0;
  margin:0 auto;
  max-width: 42rem;
  gap: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  display: flex;
}
.chat-a{
  background-color: rgba(247,247,248)
}

.color-light,
.chat-a.light{
  background-color:#F7F7F7;
}
.color-dark,
.chat-a.dark{
  background-color:#444654;
  color:#ccc;
}
.chat-q.dark{
  background-color:#343440;
  color:#ccc;
}


.icon{
  display:inline-block;
  width:30px;
  height:30px;
  background-color: rgb(255, 255, 255);
}
.chat-q .icon{
  background-color: rgba(0, 0, 0, 0.3);
}

.chat-a.dark .icon{
  background-color: rgb(0, 0, 0);
}

.icon img{
  width:30px;
  height:30px;
}
form i{
  display:inline-block;
  width:32px;
  height:32px;
}
text{
  width: calc(100% - 115px);
  gap: 0.75rem;
}
text > *{
  display:inline-block;
  font-weight:bold;
  padding:0 8px;
}

b{
  font-weight:bold;
}

.result .fool{
  color:#f00;
}

truth{
  color:transparent;
  user-select:none;
}
.result truth{
  color:#3a3;
}
.ok{
  background-color:#afa;
}
.ng{
  background-color:#faa;
}
.result .answer{
  background-color:#6f6;
}

.buttons{
  padding:8px 16px;
  text-align:center;
}
.buttons button{
  padding:8px 16px;
  margin:0 4px;
}

.next{
  width:100%;
  font-size:32px;
  text-align:center;
  margin:16px 0;
}

#hint{
  padding:12px;
  margin-bottom:40px;
}

input[type="number"]{
  margin:8px 0;
  width:40px;
}
input[readonly]{
  background-color:#eee;
}
label b{
  display:inline-block;
  width:40px;
}
#code{
  display:none;
}