/* LadyPrompts: step-by-step prompt builder (guide layout).
   Premium deep-forest panel. Everything is scoped with the pbw prefix. */
.pbw{
  --b-bg1:#0f2218; --b-bg2:#1a3a29; --b-bg3:#234634;
  --b-sage:#a9c3a4; --b-sage2:#5b8a68; --b-clay:#d9825f; --b-clay2:#c4704f;
  --b-text:#f6f3ea; --b-mu:#b4c5b0; --b-line:rgba(255,255,255,.12);
  --b-cta:linear-gradient(135deg,#f6f3ea,#e3ead6);
  margin:18px 0 0;color:var(--b-text);font-family:var(--font-body,'DM Sans',system-ui,sans-serif);line-height:1.6;text-align:left;
  position:relative;border-radius:34px;padding:1.5px;
  background:linear-gradient(140deg,rgba(255,255,255,.28),rgba(169,195,164,.35) 40%,rgba(91,138,104,.25) 75%,rgba(196,112,79,.4));
  box-shadow:0 34px 70px -28px rgba(15,34,24,.7),0 2px 0 rgba(255,255,255,.06) inset;
}
.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 var(--b-sage);outline-offset:4px}
.pbw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pbw-hint:empty{display:none}

.pbw-in{
  position:relative;border-radius:32.5px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(60% 55% at 100% 0%,rgba(169,195,164,.20),transparent 62%),
    radial-gradient(50% 50% at 0% 100%,rgba(196,112,79,.12),transparent 60%),
    linear-gradient(160deg,var(--b-bg1) 0%,var(--b-bg2) 60%,var(--b-bg3) 100%);
}
.pbw-in::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--pa-grain);opacity:.05;mix-blend-mode:soft-light}

/* header */
.pbw-top{display:flex;align-items:center;gap:16px;min-width:0;padding:22px 24px 18px;border-bottom:1px solid var(--b-line)}
.pbw-top>div:nth-child(2){min-width:0}
.pbw-ring{position:relative;flex:none;width:58px;height:58px}
.pbw-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.pbw-ring .pbw-bgc{fill:none;stroke:rgba(255,255,255,.12);stroke-width:5}
.pbw-ring .pbw-fg{fill:none;stroke:var(--b-sage);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:600 15px var(--hd);color:#fff}
.pa-pg .pbw .pbw-top h2{margin:0;font:600 clamp(21px,3.4vw,27px)/1.15 var(--hd);letter-spacing:-.01em;color:#fff}
.pbw-top p{margin:3px 0 0;color:var(--b-mu);font-size:14px;line-height:1.4}
.pbw-dots{display:flex;gap:8px;margin-left:auto}
.pbw-dots button{appearance:none;flex:none;border:0;padding:0;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18);cursor:pointer;position:relative;transition:all .3s}
.pbw-dots button::before{content:"";position:absolute;inset:-16px -4px}
.pbw-dots button.on{width:28px;border-radius:99px;background:var(--b-sage)}
.pbw-dots button.ok{background:var(--b-sage2)}

/* steps */
.pbw-stage{display:grid;min-width:0;padding:28px 24px 8px}
.pbw-slide{grid-area:1/1;min-width:0;overflow-wrap:anywhere;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)}
.pa-pg .pbw .pbw-q{margin:0 0 6px;font:500 clamp(24px,4vw,34px)/1.2 var(--hd);letter-spacing:-.015em;color:#fff}
.pbw-q span{padding-bottom:.12em;font-style:italic;color:var(--b-sage)}
.pbw-hint{margin:0 0 18px;color:var(--b-mu);font-size:14.5px}

.pbw-inp{position:relative;border-radius:20px;padding:1.5px;background:var(--b-line);transition:background .3s,box-shadow .3s}
.pbw-inp:focus-within{background:linear-gradient(135deg,var(--b-sage),var(--b-sage2));box-shadow:0 14px 36px -12px rgba(169,195,164,.35)}
.pbw-inp input{display:block;width:100%;min-width:0;max-width:100%;min-height:60px;padding:0 20px;border:0;border-radius:18.5px;background:rgba(10,24,16,.72);color:#fff;font:500 17px var(--font-body);outline:0}
.pbw-inp input::placeholder{color:#7f9a86;font-weight:400}
.pbw-sug{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pbw-chip{appearance:none;cursor:pointer;max-width:100%;min-height:44px;padding:9px 16px;border-radius:999px;border:1px solid var(--b-line);background:rgba(255,255,255,.05);color:#e6eedf;font:600 14px/1.35 var(--font-body);white-space:normal;overflow-wrap:anywhere;transition:all .25s}
@media (hover:hover) and (pointer:fine){.pbw-chip:hover{border-color:rgba(169,195,164,.6);background:rgba(169,195,164,.14);transform:translateY(-1px)}}
.pbw-chip[aria-pressed="true"]{background:linear-gradient(135deg,#f6f3ea,#dfe8d2);border-color:transparent;color:#1b3a2a;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);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-light .pbw-sug{display:grid;grid-template-columns:1fr;gap:8px;margin-top:2px}
@media(min-width:560px){.pbw-light .pbw-sug{grid-template-columns:1fr 1fr}}
.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;gap:12px}
.pbw-light .pbw-chip::after{content:"";flex:none;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:#1b3a2a;background:radial-gradient(circle,#1b3a2a 38%,transparent 42%)}

/* nav */
.pbw-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px 26px}
.pbw-nav button{appearance:none;cursor:pointer;min-height:50px;padding:0 24px;border-radius:999px;font:700 15px var(--font-body);display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;transition:all .2s}
.pbw-back{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff}
@media (hover:hover) and (pointer:fine){.pbw-back:hover{background:rgba(255,255,255,.12)}}
.pbw-back[disabled]{opacity:.35;pointer-events:none}
.pbw-next{border:0;background:var(--b-cta);color:#1b3a2a;box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
@media (hover:hover) and (pointer:fine){.pbw-next:hover{transform:translateY(-1px);filter:brightness(1.04)}}
.pbw-next svg{transition:transform .25s}.pbw-next:hover svg{transform:translateX(3px)}
.pbw-kb{flex:1;font-size:12.5px;color:#8ea58f;text-align:center}

/* live prompt */
.pbw-pv{position:relative;overflow:hidden;margin:0 16px 16px;padding:20px 20px 22px;border-radius:26px;border:1px solid var(--b-line);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(10,24,16,.55))}
.pbw-pv.ready{border-color:rgba(169,195,164,.6);animation:pbw-glow 2.4s ease-in-out infinite}
@keyframes pbw-glow{50%{box-shadow:0 0 0 6px rgba(169,195,164,.12),0 20px 50px -14px rgba(169,195,164,.3)}}
.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:.14em;text-transform:uppercase;color:var(--b-sage)}
.pbw-pv-h em{font-style:normal;font-size:12.5px;color:var(--b-mu)}
.pbw-sentence{margin:0;font-size:15.5px;line-height:2;color:#cfdccb;overflow-wrap:anywhere}
.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:rgba(169,195,164,.2);border:1px solid rgba(169,195,164,.4);color:#fff;font-weight:600;transition:all .3s;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pbw-tok.cur{background:linear-gradient(135deg,var(--b-clay),var(--b-clay2));border-color:transparent;box-shadow:0 0 0 4px rgba(217,130,95,.22);animation:pbw-cur 1.6s ease-in-out infinite}
@keyframes pbw-cur{50%{box-shadow:0 0 0 8px rgba(217,130,95,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(217,130,95,.9);background:var(--b-clay);border-color:rgba(255,255,255,.7);transform:scale(1)}
  38%{box-shadow:0 0 0 5px rgba(217,130,95,.24);transform:scale(1.045)}
  100%{box-shadow:0 0 0 14px rgba(217,130,95,0);background:rgba(169,195,164,.2);transform:scale(1)}
}
.pbw-copy{position:relative;isolation:isolate;appearance:none;border:0;cursor:pointer;width:100%;min-height:54px;margin-top:16px;border-radius:999px;background:var(--b-cta);color:#1b3a2a;font:700 16px var(--font-body);display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;box-shadow:0 16px 34px -12px rgba(0,0,0,.55);transition:transform .2s,filter .2s}
@media (hover:hover) and (pointer:fine){.pbw-copy:hover{transform:translateY(-1px);filter:brightness(1.04)}}
.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,.7),transparent);transform:translateX(-160%) skewX(-20deg);animation:pbw-shine 3.6s ease-in-out infinite}
@keyframes pbw-shine{60%,100%{transform:translateX(500%) skewX(-20deg)}}
.pbw-copy .pbw-a,.pbw-copy .pbw-b{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px}
.pbw-copy .pbw-b{display:none}
.pbw-copy.done{background:linear-gradient(135deg,#3aa56d,#2f8f5b);color:#fff}
.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}}

@media(prefers-reduced-motion:reduce){
  .pbw *{animation:none!important;transition:none!important}
  .pbw-w{opacity:1;transform:none}.pbw-copy::after{display:none}
}

/* wide screens: steps on the left, live prompt on the right */
@media(min-width:900px){
  .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:32px 30px 8px}
  .pbw-nav{grid-area:nav;padding:18px 30px 30px;align-self:end}
  .pbw-pv{grid-area:pv;margin:24px 24px 24px 0;display:flex;flex-direction:column}
  .pbw-sentence{font-size:16.5px;flex:1}
}

/* phones */
@media(max-width:600px){
  .pbw{border-radius:26px;margin-top:14px}
  .pbw-in{border-radius:24.5px}
  .pbw-dots{display:none}
  .pbw-kb{display:none}
  .pbw-top{gap:12px;padding:16px 16px 14px}
  .pbw-ring{width:46px;height:46px}
  .pbw-ring b{font-size:13px}
  .pa-pg .pbw .pbw-top h2{font-size:clamp(19px,5.4vw,22px)}
  .pbw-top p{font-size:12.5px}
  .pbw-stage{padding:22px 16px 4px}
  .pa-pg .pbw .pbw-q{font-size:clamp(23px,6.4vw,28px)}
  .pbw-hint{font-size:13.5px;margin-bottom:15px}
  .pbw-inp input{min-height:54px;padding:0 15px;font-size:16px;border-radius:15.5px}
  .pbw-inp{border-radius:17px}
  .pbw-chip{min-height:42px;padding:9px 13px;font-size:13px}
  .pbw-light .pbw-chip{min-height:48px;font-size:14px;border-radius:15px}
  .pbw-nav{padding:14px 16px 18px;gap:10px}
  .pbw-nav button{min-height:48px;padding:0 20px;font-size:14px;gap:7px}
  .pbw-next{flex:1}
  .pbw-pv{margin:0 10px 10px;padding:16px 15px 17px;border-radius:20px}
  .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{padding:14px 12px 12px}
  .pbw-stage{padding:19px 12px 3px}
  .pbw-nav{padding:13px 12px 15px}
  .pbw-nav button{padding:0 14px}
}