.demo-shell{--pp-ink:#17221f;--pp-ink-soft:#53605b;--pp-muted:#7b8782;--pp-canvas:#f7f5f0;--pp-canvas-deep:#f1eee7;--pp-surface:#fffefb;--pp-surface-soft:#faf9f5;--pp-border:#dfddd6;--pp-border-strong:#cecac0;--pp-green:#0d695a;--pp-green-dark:#084d43;--pp-green-soft:#e5f1ec;--pp-sage:#dbe9e2;--pp-amber:#a95f17;--pp-amber-border:#e8cda9;--pp-amber-soft:#fff8ed;--pp-danger:#a63d36;--pp-shadow-sm:0 1px 2px #18221f0d;--pp-shadow-md:0 8px 24px #18221f12;--pp-shadow-lg:0 24px 70px #141f1c29;--pp-serif:var(--font-fraunces), Georgia, "Times New Roman", serif;--pp-sans:var(--font-nunito), Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;background:radial-gradient(circle at 78% 6%, #e8efeb8c, transparent 34%), var(--pp-canvas);max-width:900px;min-height:100vh;color:var(--pp-ink);font-family:var(--pp-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;flex-direction:column;gap:22px;margin:0 auto;padding:40px clamp(18px,3vw,40px) 88px;font-size:14px;line-height:1.5;display:flex}.demo-shell *,.demo-shell :before,.demo-shell :after{box-sizing:border-box}.demo-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.demo-title{color:#13302a;font-family:var(--pp-serif);letter-spacing:-.025em;margin:0;font-size:clamp(22px,3.4vw,30px);font-weight:600}.demo-safety{border:1px solid var(--pp-sage);background:var(--pp-green-soft);color:var(--pp-green-dark);border-radius:999px;align-items:center;gap:7px;padding:5px 13px;font-size:11.5px;font-weight:700;display:inline-flex}.demo-stepper{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.demo-step{background:var(--pp-border);border-radius:999px;flex:34px;height:5px;transition:background .3s}.demo-step--done{background:var(--pp-sage)}.demo-step--current{background:var(--pp-green);box-shadow:0 0 0 3px var(--pp-green-soft)}.demo-stage{border:1px solid var(--pp-border);background:var(--pp-surface);box-shadow:var(--pp-shadow-lg);border-radius:20px;overflow:hidden}.demo-panel{flex-direction:column;gap:16px;padding:clamp(20px,3vw,30px);display:flex}.demo-frame{color:#527068;letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:6px;font-size:10.5px;font-weight:850;display:inline-flex}.demo-panel h2{color:#13302a;font-family:var(--pp-serif);letter-spacing:-.02em;margin:0;font-size:clamp(20px,2.6vw,26px);font-weight:620;line-height:1.12}.demo-caption{max-width:62ch;color:var(--pp-ink-soft);margin:0;font-size:14px}.demo-shell .card{border:1px solid var(--pp-border);background:var(--pp-surface);box-shadow:var(--pp-shadow-md);border-radius:16px;flex-direction:column;gap:6px;padding:18px 20px;display:flex}.demo-shell .card--muted{background:var(--pp-surface-soft);box-shadow:none}.demo-shell .card--flat{box-shadow:none}.demo-shell .card strong{color:var(--pp-ink);font-size:15px}.demo-shell .text-secondary{color:var(--pp-ink-soft)}.demo-look{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.demo-photo{object-fit:cover;border:1px solid var(--pp-border);background:linear-gradient(145deg,#cfe4dc,#eef3ef);border-radius:16px;flex:none;width:104px;height:104px}.demo-photo--lg{width:150px;height:150px}.demo-kv{grid-template-columns:auto 1fr;gap:6px 20px;margin:0;font-size:13px;display:grid}.demo-kv dt{color:var(--pp-muted)}.demo-kv dd{color:var(--pp-ink);margin:0;font-weight:650}.demo-thread{flex-direction:column;gap:10px;display:flex}.demo-bubble{border-radius:16px;max-width:88%;padding:11px 16px;font-size:13.5px;line-height:1.45}.demo-bubble--customer{background:linear-gradient(145deg, var(--pp-green), var(--pp-green-dark));color:#f4faf7;border-bottom-right-radius:6px;align-self:flex-end}.demo-bubble--ai{background:var(--pp-surface-soft);color:var(--pp-ink);border:1px solid var(--pp-border);border-bottom-left-radius:6px;align-self:flex-start}.demo-recovered{font-family:var(--pp-serif);letter-spacing:-.03em;color:var(--pp-green-dark);margin:4px 0 0;font-size:clamp(34px,6vw,46px);font-weight:600}.demo-shell .badge{border:1px solid var(--pp-sage);background:var(--pp-green-soft);width:fit-content;color:var(--pp-green-dark);letter-spacing:.02em;border-radius:999px;align-items:center;gap:5px;padding:4px 11px;font-size:11px;font-weight:800;display:inline-flex}.demo-shell .badge--warning{border-color:var(--pp-amber-border);background:var(--pp-amber-soft);color:var(--pp-amber)}.demo-shell .badge--butter{border-color:var(--pp-border-strong);background:var(--pp-surface-soft);color:var(--pp-ink-soft)}.demo-reply{flex-wrap:wrap;gap:10px;width:100%;display:flex}.demo-reply input{border:1px solid var(--pp-border-strong);background:var(--pp-surface);color:var(--pp-ink);font:inherit;border-radius:12px;flex:320px;padding:12px 14px}.demo-reply input:focus-visible{border-color:var(--pp-green);box-shadow:0 0 0 3px var(--pp-green-soft);outline:none}.demo-shell .button{background:linear-gradient(145deg, var(--pp-green), var(--pp-green-dark));color:#f4faf7;cursor:pointer;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;padding:12px 22px;font-family:inherit;font-size:14px;font-weight:750;transition:box-shadow .15s,transform .15s,opacity .15s;display:inline-flex}.demo-shell .button:hover:not(:disabled){box-shadow:var(--pp-shadow-md);transform:translateY(-1px)}.demo-shell .button:disabled{opacity:.55;cursor:progress}.demo-shell .button--secondary{background:var(--pp-surface);border-color:var(--pp-green);color:var(--pp-green-dark)}.demo-shell .button--ghost{border-color:var(--pp-border-strong);color:var(--pp-ink-soft);background:0 0}.demo-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.demo-error{color:var(--pp-danger);margin:0;font-size:13px;font-weight:600}.demo-metrics{border:1px dashed var(--pp-border-strong);background:var(--pp-surface-soft);border-radius:16px;padding:18px}.demo-metrics-label{color:var(--pp-amber);letter-spacing:.11em;text-transform:uppercase;align-items:center;gap:6px;margin-bottom:12px;font-size:10.5px;font-weight:850;display:inline-flex}.demo-metrics-grid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;display:grid}.demo-metric{background:var(--pp-surface);border:1px solid var(--pp-border);border-radius:12px;padding:12px 14px}.demo-metric-value{font-family:var(--pp-serif);color:#13302a;margin:0;font-size:18px;font-weight:600}.demo-metric-label{color:var(--pp-muted);margin:3px 0 0;font-size:11px}.demo-reset{border-top:1px solid var(--pp-border);flex-wrap:wrap;align-items:center;gap:12px;padding-top:18px;display:flex}.demo-reset small,.demo-reset span{color:var(--pp-muted);font-size:12.5px}.demo-shell .alert{border:1px solid var(--pp-amber-border);background:var(--pp-amber-soft);color:var(--pp-ink);border-radius:14px;padding:14px 18px;font-size:13.5px}.demo-shell .alert--danger{color:var(--pp-danger);background:#fdf3f2;border-color:#e8c4c0}@media (max-width:640px){.demo-controls{flex-direction:column;align-items:stretch}.demo-controls .button,.demo-reply .button{width:100%}}