/* PromptTick: animated step-by-step prompt builder (guide layout). Everything is scoped with the pbw prefix. */
.pbw{--pt-purple:#7c3aed;--pt-pink:#ec4899;--pt-orange:#f97316;--pt-card:#150d26;--pt-text:#f3eeff;--pt-mu:#b9acd9;
  --g:linear-gradient(135deg,#7c3aed,#ec4899);--g3:linear-gradient(120deg,#7c3aed,#ec4899 55%,#f97316);
  margin:18px 14px 0;color:var(--pt-text);font-family:var(--font-body,'DM Sans',system-ui,sans-serif);line-height:1.6;text-align:left}
.pbw *,.pbw *::before,.pbw *::after{box-sizing:border-box}
.pbw button{font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pbw :focus-visible{outline:2px solid #f0abfc;outline-offset:4px}
.pbw-top h2,.pbw-q{color:#fff}
.pbw-hint:empty{display:none}
.pbw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pbw{position:relative;border-radius:34px;padding:1.5px;background:linear-gradient(140deg,rgba(255,255,255,.35),rgba(124,58,237,.5) 40%,rgba(236,72,153,.65) 75%,rgba(249,115,22,.55));box-shadow:0 40px 90px rgba(0,0,0,.55)}
.pbw-in{border-radius:32.5px;background:#0f0820;overflow:hidden}
.pbw-top{display:flex;align-items:center;gap:16px;padding:22px 22px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
.pbw-ring{position:relative;flex:none;width:62px;height:62px}
.pbw-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.pbw-ring .pbw-bgc{fill:none;stroke:rgba(255,255,255,.1);stroke-width:5}
.pbw-ring .pbw-fg{fill:none;stroke:url(#rg);stroke-width:5;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4;transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1)}
.pbw-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 16px var(--font-heading);color:#fff}
.pbw-top h2{margin:0;font:800 clamp(21px,4vw,27px)/1.1 var(--font-heading);letter-spacing:-.01em}
.pbw-top p{margin:3px 0 0;color:var(--pt-mu);font-size:14px}
.pbw-dots{display:flex;gap:8px;margin-left:auto}
.pbw-dots button{appearance:none;border:0;padding:0;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.16);cursor:pointer;position:relative;transition:all .3s}
.pbw-dots button::before{content:"";position:absolute;inset:-16px -4px}
.pbw-dots button.on{width:30px;border-radius:99px;background:var(--g3)}
.pbw-dots button.ok{background:#a78bfa}
@media(max-width:520px){.pbw-dots{display:none}}

.pbw-stage{display:grid;padding:26px 22px 8px}
.pbw-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(36px);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s .55s}
.pbw-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s .1s,transform .55s .1s cubic-bezier(.2,.8,.2,1),visibility 0s}
.pbw-slide.past{transform:translateX(-36px)}
.pbw-q{margin:0 0 6px;font:800 clamp(22px,4.4vw,30px)/1.3 var(--font-heading);letter-spacing:-.01em}
.pbw-q span{padding-bottom:.12em;background:var(--g3);-webkit-background-clip:text;background-clip:text;color:transparent}
.pbw-hint{margin:0 0 18px;color:var(--pt-mu);font-size:14.5px}
.pbw-inp{position:relative;border-radius:22px;padding:1.5px;background:rgba(255,255,255,.14);transition:background .3s,box-shadow .3s}
.pbw-inp:focus-within{background:var(--g3);box-shadow:0 14px 40px rgba(124,58,237,.35)}
.pbw-inp input{display:block;width:100%;min-height:62px;padding:0 20px;border:0;border-radius:20.5px;background:#150d26;color:#fff;font:600 19px var(--font-body);outline:0}
.pbw-inp input::placeholder{color:#7f739d;font-weight:500}
.pbw-sug{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pbw-chip{appearance:none;cursor:pointer;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#e4dbf7;font:600 14px var(--font-body);transition:all .25s}
.pbw-chip:hover{border-color:rgba(236,72,153,.6);background:rgba(124,58,237,.25);transform:translateY(-1px)}
.pbw-chip[aria-pressed="true"]{background:var(--g);border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(236,72,153,.32)}
/* Selection feedback inspired by the Studio builder: a quick lift on the choice,
   followed by an orange glow around the matching word in the live prompt. */
.pbw-chip[aria-pressed="true"]{animation:pbw-chipSelect .34s cubic-bezier(.2,.8,.2,1)}
@keyframes pbw-chipSelect{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}

.pbw-chip:focus-visible,.pbw-nav button:focus-visible,.pbw-dots button:focus-visible,.pbw-copy:focus-visible,.pbw-inp input:focus-visible{outline:2px solid #f0abfc;outline-offset:3px}
.pbw-light .pbw-sug{margin-top:2px}
.pbw-light .pbw-chip{width:100%;text-align:left;border-radius:18px;min-height:52px;font-size:15.5px;display:flex;align-items:center;justify-content:space-between}
.pbw-light .pbw-sug{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:560px){.pbw-light .pbw-sug{grid-template-columns:1fr 1fr}}
.pbw-light .pbw-chip::after{content:"";width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.3);transition:all .25s}
.pbw-light .pbw-chip[aria-pressed="true"]::after{border-color:#fff;background:radial-gradient(circle,#fff 38%,transparent 42%)}

.pbw-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 24px}
.pbw-nav button{appearance:none;cursor:pointer;min-height:52px;padding:0 24px;border-radius:999px;font:700 15px var(--font-body);display:inline-flex;align-items:center;gap:10px;transition:all .2s}
.pbw-back{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff}
.pbw-back:hover{background:rgba(255,255,255,.14)}
.pbw-back[disabled]{opacity:.35;pointer-events:none}
.pbw-next{border:0;background:var(--g3);background-size:160% 100%;color:#fff;box-shadow:0 12px 30px rgba(236,72,153,.35)}
.pbw-next:hover{background-position:100% 0;transform:translateY(-1px)}
.pbw-next svg{transition:transform .25s}.pbw-next:hover svg{transform:translateX(3px)}
.pbw-kb{font-size:12.5px;color:#8f84ad;text-align:center;flex:1}
@media(max-width:520px){.pbw-kb{display:none}}

/* assembling prompt */
.pbw-pv{margin:0 14px 14px;border-radius:26px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(124,58,237,.14),rgba(21,13,38,.85));padding:18px 18px 20px;position:relative;overflow:hidden}
.pbw-pv.ready{border-color:transparent;background:linear-gradient(#150d26,#150d26) padding-box,var(--g3) border-box;border:1.5px solid transparent;animation:pbw-glow 2.4s ease-in-out infinite}
@keyframes pbw-glow{50%{box-shadow:0 0 0 6px rgba(236,72,153,.14),0 20px 50px rgba(124,58,237,.35)}}
.pbw-pv-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.pbw-pv-h span{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#f0abfc}
.pbw-pv-h em{font-style:normal;font-size:12.5px;color:var(--pt-mu)}
.pbw-sentence{margin:0;font-size:15.5px;line-height:2;color:#bfb3dc}
.pbw-w{display:inline-block;opacity:0;transform:translateY(8px);animation:pbw-wi .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pbw-wi{to{opacity:1;transform:none}}
.pbw-tok{display:inline;padding:2px 10px;margin:0 1px;border-radius:10px;background:linear-gradient(135deg,rgba(124,58,237,.42),rgba(236,72,153,.34));border:1px solid rgba(240,171,252,.35);color:#fff;font-weight:600;transition:all .3s;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pbw-tok.cur{opacity:1;transform:none;background:var(--g3);border-color:transparent;box-shadow:0 0 0 4px rgba(249,115,22,.22);animation:pbw-cur 1.6s ease-in-out infinite}
@keyframes pbw-cur{50%{box-shadow:0 0 0 8px rgba(249,115,22,0)}}
.pbw-tok.flash{animation:pbw-selectionFlash .9s cubic-bezier(.2,.8,.2,1)}
@keyframes pbw-selectionFlash{
  0%{box-shadow:0 0 0 0 rgba(249,115,22,.9);background:var(--pt-orange);border-color:rgba(255,255,255,.7);transform:scale(1)}
  38%{box-shadow:0 0 0 5px rgba(249,115,22,.24);background:var(--g3);transform:scale(1.045)}
  100%{box-shadow:0 0 0 14px rgba(249,115,22,0);background:linear-gradient(135deg,rgba(124,58,237,.42),rgba(236,72,153,.34));transform:scale(1)}
}
.pbw-copy{position:relative;appearance:none;border:0;cursor:pointer;width:100%;min-height:54px;margin-top:14px;border-radius:999px;background:var(--g3);background-size:170% 100%;color:#fff;font:700 16px var(--font-body);display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;box-shadow:0 14px 34px rgba(236,72,153,.35);transition:transform .2s,background-position .6s}
.pbw-copy:hover{background-position:100% 0;transform:translateY(-1px)}.pbw-copy:active{transform:scale(.98)}
.pbw-copy::after{content:"";position:absolute;top:0;bottom:0;left:0;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-160%) skewX(-20deg);animation:pbw-shine 3.4s ease-in-out infinite}
@keyframes pbw-shine{60%,100%{transform:translateX(500%) skewX(-20deg)}}
.pbw-copy .pbw-a,.pbw-copy .pbw-b{display:inline-flex;align-items:center;gap:10px}.pbw-copy .pbw-b{display:none}
.pbw-copy.done .pbw-a{display:none}.pbw-copy.done .pbw-b{display:inline-flex}
.pbw-pcs{position:absolute;inset:0;pointer-events:none}
.pbw-pc{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;animation:pbw-burst .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pbw-burst{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
.pbw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.pbw *{animation:none!important;transition:none!important}.pbw-w{opacity:1;transform:none}.pbw-slide{transition:none}}


/* Polished responsive refinements — preserves the original visual identity */
.pbw-top{min-width:0}
.pbw-top>div:nth-child(2){min-width:0}
.pbw-top p{line-height:1.4}
.pbw-dots button{flex:none}
.pbw-stage{min-width:0}
.pbw-slide{min-width:0;overflow-wrap:anywhere}
.pbw-inp input{min-width:0;max-width:100%;font-size:16px} /* avoids iOS zoom on focus */
.pbw-chip{max-width:100%;overflow-wrap:anywhere;white-space:normal;line-height:1.35}
.pbw-light .pbw-chip{gap:12px}
.pbw-light .pbw-chip::after{flex:none}
.pbw-nav button{white-space:nowrap;justify-content:center}
.pbw-sentence{overflow-wrap:anywhere}
.pbw-copy{isolation:isolate}
.pbw-copy .pbw-a,.pbw-copy .pbw-b{position:relative;z-index:1}
.pbw-pv-h span{letter-spacing:.13em}

@media(max-width:600px){
  
  .pbw{border-radius:25px;box-shadow:0 22px 48px rgba(0,0,0,.42)}
  .pbw-in{border-radius:23.5px}
  .pbw-top{gap:12px;padding:17px 15px 14px}
  .pbw-ring{width:48px;height:48px}
  .pbw-ring b{font-size:13px}
  .pbw-ring .pbw-fg,.pbw-ring .pbw-bgc{stroke-width:5.5}
  .pbw-top h2{font-size:clamp(19px,5vw,23px)}
  .pbw-top p{font-size:12px}
  .pbw-stage{padding:22px 16px 4px}
  .pbw-q{font-size:clamp(23px,6vw,28px)}
  .pbw-hint{font-size:13.5px;margin-bottom:15px}
  .pbw-inp input{min-height:54px;padding:0 15px;font-size:16px;border-radius:17px}
  .pbw-inp{border-radius:18px}
  .pbw-sug{gap:7px;margin-top:12px}
  .pbw-chip{min-height:42px;padding:9px 13px;font-size:13px}
  .pbw-light .pbw-chip{min-height:48px;font-size:14px;padding:11px 13px;border-radius:15px}
  .pbw-nav{padding:15px 16px 18px;gap:9px}
  .pbw-nav button{min-height:47px;padding:0 17px;font-size:14px;gap:7px}
  .pbw-pv{margin:0 9px 9px;padding:15px 14px 16px;border-radius:20px}
  .pbw-pv-h{align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
  .pbw-pv-h span{font-size:10px;letter-spacing:.1em}
  .pbw-pv-h em{font-size:11px}
  .pbw-sentence{font-size:14px;line-height:1.9}
  .pbw-tok{padding:2px 6px;border-radius:7px}
  .pbw-copy{min-height:50px;font-size:15px;margin-top:12px}
}
@media(max-width:360px){
  
  .pbw-top{gap:9px;padding:14px 11px 12px}
  .pbw-ring{width:42px;height:42px}
  .pbw-top h2{font-size:18px}
  .pbw-top p{font-size:11px}
  .pbw-stage{padding:19px 12px 3px}
  .pbw-nav{padding:13px 12px 15px}
  .pbw-nav button{padding:0 13px}
  .pbw-pv{margin:0 6px 6px;padding:13px 11px 14px}
}
@media(min-width:521px) and (max-width:700px){
  .pbw-top{gap:12px;padding-left:18px;padding-right:18px}
  .pbw-stage{padding-left:18px;padding-right:18px}
}
@media(prefers-reduced-motion:reduce){
  .pbw,.pbw-pv,.pbw-copy,.pbw-chip,.pbw-nav button{scroll-behavior:auto}
  .pbw-copy::after{display:none}
}


/* wide screens: same width as the other guide boxes, steps on the left and the live prompt on the right */
@media(min-width:900px){
  .pbw{margin:22px 28px 0}
  .pbw-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"top top" "stage pv" "nav pv";align-items:stretch}
  .pbw-top{grid-area:top}
  .pbw-stage{grid-area:stage;padding:30px 28px 8px}
  .pbw-nav{grid-area:nav;padding:18px 28px 28px;align-self:end}
  .pbw-pv{grid-area:pv;margin:22px 22px 22px 0;display:flex;flex-direction:column}
  .pbw-sentence{font-size:16.5px;flex:1}
  .pbw-q{font-size:clamp(26px,2.6vw,34px)}
}