:root{
  --bg:#f7f4f1;
  --card:#ffffff;
  --ink:#221238;
  --body:#463a5c;
  --muted:#6c5c85;
  --purple-deep:#2a1547;
  --purple:#5b2fa0;
  --purple-hover:#4b2586;
  --purple-tint:#f4eefb;
  --purple-border:#e4d8f3;
  --purple-border-hover:#c3a9e6;
  --gold:#ffd36b;
  --danger:#c23a5e;
  --radius-lg:18px;
  --radius-md:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
body{
  background:var(--bg);
  min-height:100vh;
  padding:clamp(24px,6vw,48px) 14px calc(env(safe-area-inset-bottom,0px) + 24px);
  font-family:"Heebo","Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.kw{max-width:520px;margin:0 auto;color:var(--body);direction:rtl}

/* ===== intro (avatar + trust line) ===== */
.kw-intro{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;max-width:340px;margin-inline:auto}
.kw-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--purple-border)}
.kw-intro p{margin:0;flex:1 1 auto;min-width:0;text-align:right;font-size:13px;color:var(--muted);font-weight:600;line-height:1.4}

/* ===== hero ===== */
.kw-hero{text-align:center;padding:4px 6px 22px}
.kw-hero h1{font-size:clamp(22px,5.5vw,28px);font-weight:600;line-height:1.32;margin:0 0 14px;color:var(--ink)}
.kw-hero h1 strong{font-weight:800;color:var(--purple)}
.kw-hero p{font-size:clamp(15.5px,3.8vw,16px);line-height:1.65;color:var(--body);margin:0 0 16px}
.kw-quote{display:inline-block;font-style:italic;color:var(--muted)}
.kw-hero-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.kw-hero-tags span{font-size:12.5px;font-weight:700;color:var(--purple);background:var(--purple-tint);padding:6px 12px;border-radius:99px}

.kw-start{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:22px;
  padding:14px 34px;background:var(--purple);color:#fff;font-size:16px;font-weight:800;
  border:none;border-radius:var(--radius-md);cursor:pointer;font-family:inherit;transition:background .15s}
.kw-start:hover{background:var(--purple-hover)}
.kw-start:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* ===== card ===== */
.kw-card{background:var(--card);border-radius:var(--radius-lg);padding:clamp(20px,5vw,28px) clamp(16px,4.5vw,22px);
  border:1px solid var(--purple-border);box-shadow:0 8px 24px rgba(42,21,71,.08);animation:kwfade .35s ease}
.kw-top{margin-bottom:20px}
.kw-steplabel{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:10px}

.kw-dots{display:flex;gap:6px}
.kw-dot{flex:1;height:5px;border-radius:99px;background:var(--purple-border);transition:background .25s ease}
.kw-dot.done{background:var(--purple)}
.kw-dot.current{background:var(--purple)}

.q{display:none}
.q.active{display:block;animation:kwfade .3s ease}
@keyframes kwfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .q.active{animation:none}
  .kw-result{animation:none}
  .kw-card{animation:none}
}

.q-title{font-size:clamp(17px,4.6vw,19px);font-weight:800;line-height:1.4;margin-bottom:5px;color:var(--ink)}
.q-sub{font-size:13px;color:var(--muted);margin-bottom:16px}

.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:13px 16px;border:1.5px solid var(--purple-border);
  border-radius:var(--radius-md);cursor:pointer;font-size:16px;font-weight:500;color:var(--ink);
  transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--purple-border-hover)}
.opt input{accent-color:var(--purple);width:19px;height:19px;margin:0;flex:none}
.opt input:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.opt.sel,.opt:has(input:checked){border-color:var(--purple);background:var(--purple-tint);font-weight:700}

.kw-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.kw-back{display:flex;align-items:center;min-height:44px;padding:8px 6px;font-size:14px;font-weight:600;
  color:var(--muted);cursor:pointer}
.kw-back:hover{color:var(--body)}
.kw-fwd{flex:1;min-height:44px;background:var(--purple);color:#fff;font-size:16px;font-weight:800;padding:15px 20px;
  border-radius:var(--radius-md);cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center;
  transition:background .15s}
.kw-fwd:hover{background:var(--purple-hover)}
.kw-fwd:focus-visible,.kw-back:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:6px}

.kw-err{color:var(--danger);font-size:13px;margin-top:12px;text-align:center}
.kw-hidden{display:none}

/* ===== result ===== */
.kw-result{margin-top:6px;padding:clamp(24px,6vw,32px) clamp(18px,5vw,24px);background:var(--purple-deep);
  border-radius:var(--radius-lg);color:#fff;text-align:center;animation:kwfade .35s ease}
.kw-result .label{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--gold);margin-bottom:6px}
.kw-result .big{font-size:clamp(36px,10vw,46px);font-weight:800;line-height:1.1;margin:6px 0 14px;color:var(--gold)}
.kw-result .lead{font-size:15.5px;line-height:1.7;color:#e3d8f2}
.kw-result .lead+.lead{margin-top:12px}
.kw-result .ratio{font-size:16.5px;font-weight:700;margin:16px 0 0;color:#fff}
.kw-result .delayed{margin-top:18px;padding-top:16px;border-top:1px solid #4a3168;font-size:14px;color:#ffc28f;font-weight:600;line-height:1.6}
.kw-num{color:var(--gold);font-weight:800}

/* credit */
.kw-credit{max-width:520px;margin:22px auto 0;text-align:center;font-size:12.5px;direction:rtl}
.kw-credit a{color:var(--muted);text-decoration:none}
.kw-credit a:hover{text-decoration:underline}