:root{
  --su-bg:#fffdf8;
  --su-card:#ffffff;
  --su-text:#2b2a33;
  --su-muted:#6f6b78;
  --su-accent:#7a5cff;
  --su-accent-2:#ff8bb7;
  --su-accent-soft:#f1edff;
  --su-success:#16784b;
  --su-success-bg:#ecf8f1;
  --su-error:#a63b3b;
  --su-error-bg:#fff0f0;
  --su-border:#e8e2f1;
  --su-shadow:0 12px 34px rgba(62,46,92,.10);
  --su-radius:22px;
}

.su-exercise{
  max-width:760px;
  margin:32px auto;
  padding:0;
  color:var(--su-text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.su-shell{
  background:var(--su-card);
  border:1px solid var(--su-border);
  border-radius:var(--su-radius);
  box-shadow:var(--su-shadow);
  overflow:hidden;
}

.su-header{
  padding:24px 24px 18px;
  background:linear-gradient(135deg,var(--su-accent-soft),#fff8fb);
  border-bottom:1px solid var(--su-border);
}

.su-brandrow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.su-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.01em;
}

.su-brandmark{
  width:36px;
  height:36px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--su-accent);
  color:#fff;
  font-size:14px;
  box-shadow:0 6px 16px rgba(122,92,255,.22);
}

.su-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.su-badge{
  font-size:12px;
  font-weight:700;
  color:var(--su-muted);
  background:#fff;
  border:1px solid var(--su-border);
  padding:6px 9px;
  border-radius:999px;
}

.su-title{
  margin:0 0 6px;
  font-size:clamp(22px,3.2vw,32px);
  line-height:1.15;
  font-weight:850;
}

.su-intro{
  margin:0;
  color:var(--su-muted);
  line-height:1.55;
}

.su-progress-wrap{
  padding:18px 24px 0;
}

.su-progress-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:var(--su-muted);
  margin-bottom:8px;
}

.su-progress{
  height:9px;
  border-radius:999px;
  background:#eeeaf5;
  overflow:hidden;
}

.su-progress-bar{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--su-accent),var(--su-accent-2));
  transition:width .25s ease;
}

.su-body{
  padding:26px 24px 28px;
}

.su-question{
  display:none;
}

.su-question.is-active{
  display:block;
  animation:suFade .22s ease;
}

@keyframes suFade{
  from{opacity:.35;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

.su-question-number{
  display:inline-block;
  margin-bottom:10px;
  font-size:13px;
  font-weight:800;
  color:var(--su-accent);
}

.su-prompt{
  font-size:clamp(19px,2.4vw,24px);
  line-height:1.45;
  font-weight:700;
  margin:0 0 20px;
}

.su-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.su-option{
  appearance:none;
  border:1.5px solid var(--su-border);
  background:#fff;
  color:var(--su-text);
  min-height:52px;
  padding:12px 14px;
  border-radius:15px;
  font:inherit;
  font-weight:750;
  cursor:pointer;
  transition:.16s ease;
}

.su-option:hover{
  border-color:#c8bcff;
  transform:translateY(-1px);
}

.su-option.is-selected{
  border-color:var(--su-accent);
  background:var(--su-accent-soft);
  box-shadow:0 0 0 3px rgba(122,92,255,.10);
}

.su-option:disabled{
  cursor:default;
  transform:none;
}

.su-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:18px;
}

.su-btn{
  appearance:none;
  border:0;
  border-radius:14px;
  padding:12px 16px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  transition:.16s ease;
}

.su-btn-primary{
  background:var(--su-accent);
  color:#fff;
}

.su-btn-primary:hover{
  filter:brightness(.97);
  transform:translateY(-1px);
}

.su-btn-secondary{
  background:#f6f3fb;
  color:var(--su-text);
  border:1px solid var(--su-border);
}

.su-btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.su-feedback{
  display:none;
  margin-top:18px;
  border-radius:16px;
  padding:14px 16px;
  line-height:1.5;
  font-weight:650;
}

.su-feedback.is-correct{
  display:block;
  background:var(--su-success-bg);
  color:var(--su-success);
  border:1px solid #cfe9db;
}

.su-feedback.is-wrong{
  display:block;
  background:var(--su-error-bg);
  color:var(--su-error);
  border:1px solid #f0cece;
}

.su-explanation{
  display:none;
  margin-top:12px;
  padding:14px 16px;
  background:#faf8fe;
  border:1px dashed #d8cff3;
  border-radius:14px;
  color:#4c4756;
  line-height:1.6;
}

.su-explanation.is-visible{
  display:block;
}

.su-result{
  display:none;
  text-align:center;
  padding:8px 0 2px;
}

.su-result.is-visible{
  display:block;
  animation:suFade .22s ease;
}

.su-score{
  font-size:clamp(38px,8vw,64px);
  line-height:1;
  font-weight:900;
  color:var(--su-accent);
  margin:8px 0 4px;
}

.su-percent{
  color:var(--su-muted);
  font-weight:800;
}

.su-motivation{
  margin:18px auto 20px;
  max-width:560px;
  padding:15px 18px;
  background:linear-gradient(135deg,#fff6fa,var(--su-accent-soft));
  border:1px solid var(--su-border);
  border-radius:16px;
  font-weight:750;
  line-height:1.55;
}

.su-next{
  margin-top:22px;
  padding:18px;
  text-align:left;
  border:1px solid var(--su-border);
  border-radius:18px;
  background:var(--su-bg);
}

.su-next-title{
  margin:0 0 6px;
  font-size:17px;
}

.su-next p{
  margin:0 0 12px;
  color:var(--su-muted);
}

.su-next a{
  display:inline-flex;
  text-decoration:none;
}

.su-noscript{
  margin-top:12px;
  padding:12px 14px;
  background:#fff7df;
  border:1px solid #f2df9b;
  border-radius:12px;
}

@media (max-width:620px){
  .su-header,.su-body{padding-left:18px;padding-right:18px}
  .su-progress-wrap{padding-left:18px;padding-right:18px}
  .su-brandrow{align-items:flex-start}
  .su-options{grid-template-columns:1fr}
  .su-btn{width:100%}
}