body{
  font-family:Arial, sans-serif;
  color:#111827;
  background:#fff;
}

h2{
margin-bottom:20px;
}

button{
padding:10px 20px;
font-size:16px;
cursor:pointer;
margin-top:20px;
}

label{
display:block;
margin-bottom:8px;
}

.words{
columns:2;
}

.timer{
font-weight:bold;
margin-bottom:20px;
}

.row{
background:#f3f4f6;
padding:10px;
margin-bottom:8px;
border-radius:6px;
}

.vote{
border:1px solid #ccc;
padding:4px 8px;
cursor:pointer;
margin-right:6px;
display:inline-block;
}

.vote.active{
background:#111;
color:white;
}

.hidden{
display:none;
}

.gp-wrap{
margin:0 0 20px 0;
}

.gp-top{
font-size:14px;
color:#6b7280;
margin-bottom:6px;
}

.gp-bar{
  display:flex;
  gap:8px;
  width:100%;
}

.gp-segment{
  flex:1;
  height:10px;
  background:#e5e7eb;
  border-radius:999px;
  transition:background-color .2s ease, transform .2s ease;
}

.gp-segment.is-done{
  background:#111827;
}

.gp-segment.is-current{
  background:#9ca3af;
}

.intro-card{
border:1px solid #e5e7eb;
border-radius:12px;
padding:18px;
background:#fff;
}

.intro-title{
font-size:24px;
margin-bottom:12px;
}

.intro-text{
color:#6b7280;
line-height:1.45;
margin-bottom:18px;
}