.test-main{max-width:720px;margin:0 auto;padding:60px 0 80px}

.test-progress{
  position:sticky;top:0;z-index:10;
  background:rgba(251,251,249,.92);
  backdrop-filter:blur(8px);
  padding:16px 0;
  margin-bottom:48px;
}
.test-progress-bar{height:2px;background:var(--line);position:relative;overflow:hidden}
.test-progress-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:var(--ink);
  transition:width .6s cubic-bezier(.4,0,.2,1);
}
.test-progress-meta{
  display:flex;justify-content:space-between;margin-top:12px;
  font-size:11px;letter-spacing:.12em;color:var(--ink-3);
  font-family:var(--font-mono);text-transform:uppercase;
}

.question-card{animation:fadeUp .6s cubic-bezier(.4,0,.2,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.question-index{
  font-family:var(--font-mono);font-size:11px;
  color:var(--ink-3);letter-spacing:.16em;margin-bottom:20px;
}
.question-text{
  font-family:var(--font-serif);
  font-size:clamp(22px,3vw,28px);font-weight:400;
  line-height:1.6;letter-spacing:.01em;
  margin-bottom:40px;color:var(--ink);
}

.option-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.option{
  display:flex;align-items:center;gap:18px;
  padding:20px 4px;border-bottom:1px solid var(--line);
  cursor:pointer;font-size:15px;color:var(--ink);
  transition:background .2s,padding .2s,opacity .4s;
}
.option:hover:not(.disabled){background:var(--accent-soft);padding-left:12px}
.option.disabled{cursor:default;opacity:.35}
.option.selected{opacity:1;background:var(--accent-soft)}
.option.selected .opt-letter{background:var(--ink);color:#fff;border-color:var(--ink)}
.opt-letter{
  flex:0 0 28px;height:28px;border-radius:50%;
  border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;color:var(--ink-3);
  transition:background .2s,color .2s,border-color .2s;
}
.opt-text{flex:1;line-height:1.6}

.reaction{
  margin-top:36px;padding-left:16px;
  border-left:2px solid var(--accent);
  font-size:14px;line-height:1.9;color:var(--ink-2);
  min-height:28px;letter-spacing:.02em;
}
.reaction.visible{animation:fadeUp .5s cubic-bezier(.4,0,.2,1)}

.question-actions{
  margin-top:40px;display:flex;justify-content:flex-end;
  min-height:50px;
}

.hidden{display:none !important}

.stage-end{text-align:center;padding:80px 20px}
.stage-end p{
  font-family:var(--font-serif);
  font-size:clamp(18px,2.4vw,22px);
  line-height:2;color:var(--ink-2);
  margin-bottom:10px;
  opacity:0;transform:translateY(8px);
  transition:opacity 1s,transform 1s;
}
.stage-end p.on{opacity:1;transform:translateY(0)}
.stage-end p.strong{color:var(--ink)}
.stage-end .actions{margin-top:56px;opacity:0;transition:opacity 1s}
.stage-end .actions.on{opacity:1}

.stage-hold{
  text-align:center;padding:120px 20px;
  font-family:var(--font-serif);color:var(--ink-2);
}
.stage-hold h2{
  font-size:26px;font-weight:400;color:var(--ink);
  margin-bottom:16px;letter-spacing:.02em;
}
.stage-hold p{font-size:15px;line-height:2}

@media(max-width:700px){
  .test-main{padding:32px 0 60px}
  .test-progress{margin-left:0;margin-right:0;padding:16px 0}
  .wrap{padding:0 24px}
  .question-text{font-size:22px}
}