*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#000000;
  --muted:#71717a;
  --accent:#000000;
  --border:#e4e4e7;
  --hovercolor:#ffffff;
}

body{
  font-family:noto serif jp;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  border:50px solid black;
  display:flex;
  align-items:center;
  justify-content:center;
}

#app{
  width:100%;
  max-width:540px;
  padding:20px;
}

.card{
  background:var(--card);
  padding:44px 36px;
}

.q-text{
  font-size:1.2rem;
  font-weight:500;
  line-height:1.65;
  margin-bottom:35px;
  text-align:center;
}

.a-area{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Choice buttons (yes/no, radio) */
.btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
  font-family:inherit;
  font-size:1rem;
  padding:11px 16px;
  text-align:center;
  transition:border-color .15s,background .15s,color .15s;
  width:100%;
}
.btn:hover{border-color:var(--hovercolor);color:var(--bg); background:var(--accent);}
.btn.sel{border-color:var(--hovercolor);color:var(--card);}

/* Text / textarea */
input,textarea{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  font-family:inherit;
  font-size:.875rem;
  outline:none;
  padding:11px 14px;
  resize:none;
  transition:border-color .15s;
  width:100%;
}
input:focus,textarea:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:#b0b0b0}
textarea{min-height:96px}

/* Submit/continue button */
.submit{
  background:var(--accent);
  border:none;
  color:#fff;
  cursor:pointer;
  font-family:inherit;
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.01em;
  padding:12px;
  transition:opacity .15s;
  width:100%;
  margin-top:2px;
}
.submit:hover{opacity:.85}

/* Done message */
.done{
  font-size:.95rem;
  line-height:1.8;
  text-align:center;
  color:var(--muted);
}

/* Fade transitions */
.fade-out{animation:fadeOut .25s ease forwards}
.fade-in {animation:fadeIn  .25s ease forwards}

@keyframes fadeOut{
  from{opacity:1;transform:translateY(0)}
  to  {opacity:0;transform:translateY(-8px)}
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(8px)}
  to  {opacity:1;transform:translateY(0)}
}

@media(max-width:480px){
  .card{padding:32px 20px}
  .q-text{font-size:1rem}
}