/* Конструктор промпта для сайта — стайл-скоуп #kp. Использует бренд-переменные
   из article.css (--paper/--ink/--accent/...), но дублирует ключевые как фолбэк. */
#kp{
  --paper:#F4F3EE;--surface:#fff;--ink:#15181C;--ink-soft:#3A4048;--muted:#6A7178;
  --line:#E2E0D7;--line-strong:#CFCDC2;--accent:#C8F048;--accent-ink:#161a08;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:16px;
  max-width:1000px;margin:0 auto;padding:0 20px 120px;color:var(--ink);
}
#kp *{box-sizing:border-box}

/* ── Хиро ── */
.kp-hero{padding:clamp(28px,6vw,64px) 0 clamp(20px,4vw,36px);max-width:820px}
.kp-back{display:inline-block;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;margin-bottom:20px;min-height:40px;line-height:40px}
.kp-back:hover{color:var(--ink)}
.kp-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.kp-eyebrow b{color:var(--ink)}
.kp-hero h1{font-size:clamp(30px,6vw,52px);font-weight:800;letter-spacing:-.022em;line-height:1.06;margin:0 0 18px;text-wrap:balance;hyphens:manual}
.kp-lead{font-size:clamp(16px,2.4vw,20px);line-height:1.55;color:var(--ink-soft);margin:0;max-width:64ch;text-wrap:pretty}
.kp-lead b{color:var(--ink);font-weight:700}

/* ── Прогресс (sticky) ── */
.kp-progress{position:sticky;top:0;z-index:15;background:rgba(244,243,238,.92);backdrop-filter:saturate(140%) blur(10px);
  padding:12px 0 12px;margin:0 0 6px;border-bottom:1px solid var(--line)}
.kp-progress-bar{height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.kp-progress-bar span{display:block;height:100%;width:9%;background:var(--ink);border-radius:999px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.kp-progress-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:9px;gap:12px}
.kp-progress-meta #kpStepNum{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);flex:none}
.kp-progress-meta #kpStepName{font-weight:700;font-size:15px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Шаги ── */
.kp-step{display:none;padding:clamp(24px,5vw,44px) 0 8px;animation:kpIn .4s ease both}
.kp-step.is-active{display:block}
@keyframes kpIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kp-step-h{font-size:clamp(22px,4vw,32px);font-weight:800;letter-spacing:-.018em;line-height:1.12;margin:0 0 8px;text-wrap:balance}
.kp-step-sub{color:var(--ink-soft);font-size:clamp(15px,2vw,17px);margin:0 0 24px;max-width:60ch}
.kp-substep{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);
  background:var(--accent);display:inline-block;padding:4px 10px;border-radius:999px;margin:0 0 16px}

.kp-fieldgroup{margin:0 0 26px}
.kp-fieldgroup:last-child{margin-bottom:0}
.kp-flabel{font-weight:700;font-size:15.5px;margin:0 0 4px}
.kp-fhint{color:var(--muted);font-size:13.5px;margin:0 0 12px;line-height:1.5}

/* Текстовые поля */
.kp-input,.kp-textarea{width:100%;border:1.5px solid var(--line-strong);border-radius:12px;padding:13px 15px;
  font-size:16px;font-family:inherit;background:var(--surface);color:var(--ink);line-height:1.5}
.kp-input:focus,.kp-textarea:focus{outline:none;border-color:var(--ink)}
.kp-textarea{min-height:96px;resize:vertical}
.kp-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.kp-row2{grid-template-columns:1fr}}

/* Повторяемые URL-поля */
.kp-repeat{display:flex;flex-direction:column;gap:9px}
.kp-repeat-row{display:flex;gap:8px;align-items:center}
.kp-repeat-row .kp-input{flex:1;min-width:0}
.kp-repeat-del{flex:none;width:44px;height:44px;border:1.5px solid var(--line-strong);border-radius:11px;background:var(--surface);
  color:var(--muted);font-size:20px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.kp-repeat-del:hover{border-color:#d9534f;color:#d9534f}
.kp-repeat-add{align-self:flex-start;margin-top:2px;background:none;border:1.5px dashed var(--line-strong);border-radius:11px;
  padding:9px 14px;font-weight:600;font-size:14px;color:var(--ink-soft);cursor:pointer}
.kp-repeat-add:hover{border-color:var(--ink);color:var(--ink)}

/* Мультиселект-карточки / radio-карточки */
.kp-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.kp-card{position:relative;display:flex;flex-direction:column;gap:6px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--surface);padding:16px;cursor:pointer;transition:border-color .16s,box-shadow .16s,transform .16s}
.kp-card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,24,28,.07)}
.kp-card input{position:absolute;opacity:0;pointer-events:none}
.kp-card-t{font-weight:700;font-size:15.5px;line-height:1.25}
.kp-card-d{color:var(--muted);font-size:13px;line-height:1.45}
.kp-card .kp-tick{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:999px;border:1.5px solid var(--line-strong);
  background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:13px;color:transparent;transition:.16s}
.kp-card input:checked~.kp-tick,.kp-card.is-on .kp-tick{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.kp-card:has(input:checked),.kp-card.is-on{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink) inset}

/* Демо-контейнер в карточках шага 1 и превью шага 5 */
.kp-demo{height:130px;border-radius:10px;overflow:hidden;position:relative;background:var(--paper);border:1px solid var(--line);margin-bottom:4px}
.kp-mini{height:88px;border-radius:9px;overflow:hidden;position:relative;background:var(--paper);border:1px solid var(--line);margin-bottom:2px;display:flex;gap:5px;padding:8px}

/* Чекбоксы (списки) */
.kp-checks{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.kp-check{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);
  padding:13px 14px;cursor:pointer;transition:border-color .16s}
.kp-check:hover{border-color:var(--line-strong)}
.kp-check input{position:absolute;opacity:0;pointer-events:none}
.kp-check .kp-box{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line-strong);background:var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:transparent;transition:.16s;margin-top:1px}
.kp-check input:checked~.kp-box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.kp-check:has(input:checked){border-color:var(--ink)}
.kp-check-body{min-width:0}
.kp-check-t{font-weight:600;font-size:14.5px;line-height:1.3}
.kp-check-d{color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:2px}

/* Radio-таблетки (простые) */
.kp-pills{display:flex;flex-wrap:wrap;gap:9px}
.kp-pill{position:relative;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);padding:11px 18px;
  font-weight:600;font-size:14.5px;cursor:pointer;transition:.16s}
.kp-pill:hover{border-color:var(--line-strong)}
.kp-pill input{position:absolute;opacity:0;pointer-events:none}
.kp-pill:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}

/* Палитры */
.kp-pals{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.kp-pal{position:relative;border:1.5px solid var(--line);border-radius:13px;overflow:hidden;cursor:pointer;transition:.16s;background:var(--surface)}
.kp-pal:hover{border-color:var(--line-strong)}
.kp-pal input{position:absolute;opacity:0;pointer-events:none}
.kp-pal:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink) inset}
.kp-pal-sw{height:70px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;position:relative}
.kp-pal-sw i{position:absolute;right:9px;bottom:9px;width:20px;height:20px;border-radius:6px;display:block}
.kp-pal-cap{font-family:var(--mono);font-size:10.5px;color:var(--muted);padding:8px 10px;text-align:center;word-break:break-all;line-height:1.5}
.kp-pal .kp-tick{position:absolute;top:9px;left:9px;width:20px;height:20px;border-radius:999px;border:1.5px solid #fff;
  background:transparent;display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.kp-pal:has(input:checked) .kp-tick{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.kp-colors{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.kp-color{display:flex;flex-direction:column;gap:6px}
.kp-color span{font-size:12.5px;color:var(--muted);font-weight:600}
.kp-color input[type=color]{width:64px;height:44px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--surface);cursor:pointer;padding:3px}

/* ── Навигация ── */
.kp-nav{display:flex;gap:12px;align-items:center;margin-top:30px;position:sticky;bottom:0;
  padding:14px 0;background:linear-gradient(to top,var(--paper) 62%,transparent)}
.kp-nav button{min-height:54px;border-radius:13px;font-weight:700;font-size:16.5px;cursor:pointer;padding:0 26px;border:1.5px solid transparent;transition:.16s}
.kp-nav-back{background:transparent;border-color:var(--line-strong)!important;color:var(--ink)}
.kp-nav-back:hover{border-color:var(--ink)!important}
.kp-nav-back[disabled]{opacity:.35;cursor:default}
.kp-nav-next,.kp-nav-build{background:var(--accent);color:var(--accent-ink);margin-left:auto;flex:none}
.kp-nav-next:hover,.kp-nav-build:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(200,240,72,.5)}
.kp-nav-build{background:var(--ink);color:var(--accent)}
.kp-nav-build:hover{box-shadow:0 10px 24px rgba(21,24,28,.35)}
@media(max-width:560px){.kp-nav{gap:10px}.kp-nav button{padding:0 18px;font-size:15.5px;flex:1}.kp-nav-next,.kp-nav-build{margin-left:0}}

/* ── Результат ── */
.kp-result{margin-top:20px;scroll-margin-top:80px}
.kp-result-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.kp-result-head h2{font-size:clamp(22px,4vw,30px);font-weight:800;letter-spacing:-.018em;margin:0;flex:1 1 auto}
.kp-result-actions{display:flex;gap:10px;flex-wrap:wrap}
.kp-abtn{min-height:48px;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;padding:0 20px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);transition:.16s}
.kp-abtn:hover{border-color:var(--ink)}
.kp-abtn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.kp-abtn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(200,240,72,.5)}
.kp-abtn.ok{background:#1f7a34;border-color:#1f7a34;color:#fff}
.kp-out{background:#0E0F12;color:#E8E9E4;border-radius:16px;padding:22px;font-family:var(--mono);font-size:13px;line-height:1.65;
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;max-height:560px;overflow-y:auto;margin:0;border:1px solid #222}
.kp-openq{color:#EFC94C}

/* CTA под ключ */
.kp-cta{margin-top:34px;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:clamp(22px,4vw,34px)}
.kp-cta h3{font-size:clamp(19px,3vw,25px);font-weight:800;letter-spacing:-.015em;margin:0 0 8px;text-wrap:balance}
.kp-cta p{color:var(--ink-soft);margin:0 0 18px;font-size:15.5px;max-width:56ch}
.kp-leadform{display:grid;gap:12px;max-width:520px}
.kp-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.5}
.kp-consent input{margin-top:2px;flex:none;width:18px;height:18px;accent-color:var(--ink)}
.kp-consent a{color:var(--muted)}
.kp-leadbtn{min-height:54px;border-radius:13px;background:var(--accent);color:var(--accent-ink);border:none;font-weight:700;font-size:16.5px;cursor:pointer;transition:.16s}
.kp-leadbtn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(200,240,72,.5)}
.kp-leadbtn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.kp-leadmsg{font-size:14.5px;font-weight:600;padding:4px 0}
.kp-leadmsg.ok{color:#1f7a34}
.kp-leadmsg.err{color:#d9534f}

.kp-hidden{display:none!important}

/* ── Живые демо шага 1 ── */
.d-parallax{position:absolute;inset:0}
.d-parallax .layer{position:absolute;border-radius:8px}
.d-parallax .l1{inset:14px;background:var(--accent);opacity:.2;animation:dPar1 3.6s ease-in-out infinite alternate}
.d-parallax .l2{left:22px;top:34px;width:56px;height:56px;border-radius:999px;background:var(--ink);opacity:.85;animation:dPar2 3.6s ease-in-out infinite alternate}
.d-parallax .l3{right:20px;bottom:22px;width:72px;height:30px;background:var(--ink);opacity:.5;animation:dPar3 3.6s ease-in-out infinite alternate}
@keyframes dPar1{to{transform:translate(6px,-8px)}}
@keyframes dPar2{to{transform:translate(16px,10px)}}
@keyframes dPar3{to{transform:translate(-18px,-6px)}}

.d-reveal{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:20px}
.d-reveal i{display:block;height:11px;border-radius:4px;background:var(--ink);opacity:.85;transform:translateY(10px);animation:dRev 2.4s ease-in-out infinite}
.d-reveal i:nth-child(1){width:70%;animation-delay:0s}
.d-reveal i:nth-child(2){width:90%;background:var(--accent);opacity:1;animation-delay:.18s}
.d-reveal i:nth-child(3){width:55%;animation-delay:.36s}
.d-reveal i:nth-child(4){width:80%;animation-delay:.54s}
@keyframes dRev{0%,12%{opacity:0;transform:translateY(12px)}30%,72%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-8px)}}

.d-kinetic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:30px;letter-spacing:-.02em;color:var(--ink)}
.d-kinetic span{display:inline-block;animation:dKin 2.2s ease-in-out infinite}
.d-kinetic span:nth-child(2){animation-delay:.12s}
.d-kinetic span:nth-child(3){animation-delay:.24s;color:var(--accent-ink);background:var(--accent);border-radius:5px;padding:0 3px}
.d-kinetic span:nth-child(4){animation-delay:.36s}
.d-kinetic span:nth-child(5){animation-delay:.48s}
@keyframes dKin{0%,100%{transform:scale(.7);opacity:.55}45%{transform:scale(1.18);opacity:1}}

.d-hscroll{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden}
.d-hscroll .track{display:flex;gap:10px;padding-left:14px;animation:dHs 5s linear infinite}
.d-hscroll .track b{flex:none;width:64px;height:78px;border-radius:9px;background:var(--ink);opacity:.85}
.d-hscroll .track b:nth-child(even){background:var(--accent);opacity:1}
@keyframes dHs{to{transform:translateX(-148px)}}

.d-marquee{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden}
.d-marquee .mrow{display:flex;white-space:nowrap;font-weight:800;font-size:19px;color:var(--ink)}
.d-marquee .mrow span{padding-right:22px;animation:dMq 6s linear infinite}
.d-marquee .mrow.r2 span{color:var(--accent-ink);animation-direction:reverse;animation-duration:8s}
@keyframes dMq{to{transform:translateX(-50%)}}

.d-magnetic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.d-magnetic .mbtn{background:var(--ink);color:var(--accent);font-weight:700;font-size:14px;padding:12px 22px;border-radius:999px;
  animation:dMag 2.6s ease-in-out infinite}
@keyframes dMag{0%,100%{transform:translate(0,0)}25%{transform:translate(8px,-5px)}55%{transform:translate(-7px,4px)}80%{transform:translate(4px,3px)}}

.d-counter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.d-counter b{font-weight:800;font-size:40px;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.d-counter i{font-family:var(--mono);font-size:11px;color:var(--muted);font-style:normal;letter-spacing:.05em}

.d-calm{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:22px}
.d-calm i{display:block;height:10px;border-radius:4px;background:var(--ink);opacity:.7}
.d-calm i:nth-child(1){width:64%}
.d-calm i:nth-child(2){width:40%;background:var(--accent);opacity:1}
.d-calm .fade{animation:dCalm 4s ease-in-out infinite}
@keyframes dCalm{0%,100%{opacity:.5}50%{opacity:.9}}

/* ── Мини-схемы блоков шага 5 ── */
.kp-mini .b{background:var(--ink);opacity:.85;border-radius:4px}
.kp-mini .b.acc{background:var(--accent);opacity:1}
.kp-mini.m-split .b:first-child{flex:1.2}.kp-mini.m-split .b:last-child{flex:.8}
.kp-mini.m-full{flex-direction:column}.kp-mini.m-full .b{width:100%}.kp-mini.m-full .b:nth-child(1){flex:2}.kp-mini.m-full .b:nth-child(2){flex:.6}
.kp-mini.m-bento{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:5px}
.kp-mini.m-bento .b:nth-child(1){grid-row:1/3}.kp-mini.m-bento .b:nth-child(4){grid-column:2/4}
.kp-mini.m-marq{flex-direction:column;justify-content:center}.kp-mini.m-marq .b{height:12px;width:100%}
.kp-mini.m-sticky .b:first-child{flex:.7}.kp-mini.m-sticky .b:last-child{flex:1.3}
.kp-mini.m-hcase .b{flex:none;width:26px}
.kp-mini.m-ba{gap:3px}.kp-mini.m-ba .b{flex:1}.kp-mini.m-ba .div{flex:none;width:2px;background:var(--accent)}
.kp-mini.m-price .b{flex:1}.kp-mini.m-price .b.acc{flex:1.25}
.kp-mini.m-obj{flex-direction:column;gap:5px}.kp-mini.m-obj .b{width:100%;height:9px}
.kp-mini.m-quiz{align-items:center;justify-content:center}.kp-mini.m-quiz .b{width:52px;height:52px;border-radius:999px}.kp-mini.m-quiz .b.acc{width:34px;height:34px}
.kp-mini.m-team{gap:6px;align-items:center;justify-content:center}.kp-mini.m-team .b{width:34px;height:34px;border-radius:999px}
.kp-mini.m-cta{align-items:center;justify-content:center}.kp-mini.m-cta .b.acc{flex:none;width:80px;height:26px;border-radius:999px}
.kp-mini.m-map .b:first-child{flex:1.4}.kp-mini.m-map .b:last-child{flex:.6;opacity:.4}