.demo-shell{max-width:860px;padding:var(--space-lg) var(--space-md) var(--space-xxl);gap:var(--space-lg);flex-direction:column;margin:0 auto;display:flex}.demo-header{justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.demo-title{font-family:var(--font-heading);margin:0;font-size:1.5rem}.demo-safety{align-items:center;gap:var(--space-xs);color:var(--text-secondary);background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius-pill);padding:4px 12px;font-size:.8rem;display:inline-flex}.demo-stepper{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.demo-step{border-radius:var(--radius-pill);background:var(--border);flex:40px;height:6px;transition:background .3s}.demo-step--done{background:var(--butter)}.demo-step--current{background:var(--honey)}.demo-stage{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-md);overflow:hidden}.demo-panel{padding:var(--space-lg);gap:var(--space-md);flex-direction:column;display:flex}.demo-frame{align-items:center;gap:var(--space-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);font-size:.72rem;display:inline-flex}.demo-panel h2{font-family:var(--font-heading);margin:0;font-size:1.25rem}.demo-caption{color:var(--text-secondary);margin:0}.demo-look{gap:var(--space-md);flex-wrap:wrap;align-items:center;display:flex}.demo-photo{border-radius:var(--radius-md);object-fit:cover;background:var(--surface-muted);border:1px solid var(--border);width:96px;height:96px}.demo-photo--lg{width:140px;height:140px}.demo-kv{gap:4px var(--space-md);grid-template-columns:auto 1fr;margin:0;font-size:.9rem;display:grid}.demo-kv dt{color:var(--text-secondary)}.demo-kv dd{margin:0;font-weight:600}.demo-bubble{border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);max-width:90%}.demo-bubble--customer{background:var(--honey);color:#fff;align-self:flex-end}.demo-bubble--ai{background:var(--surface-muted);color:var(--text-primary);border:1px solid var(--border);align-self:flex-start}.demo-thread{gap:var(--space-sm);flex-direction:column;display:flex}.demo-recovered{font-family:var(--font-heading);color:var(--honey);margin:0;font-size:2.25rem}.demo-reply{gap:var(--space-sm);flex-wrap:wrap;display:flex}.demo-reply input{border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-primary);font:inherit;flex:320px;padding:10px 12px}.demo-controls{justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.demo-error{color:var(--danger);margin:0;font-size:.85rem}.demo-metrics{border:1px dashed var(--border-strong);border-radius:var(--radius-md);padding:var(--space-md);background:var(--surface-muted)}.demo-metrics-label{text-transform:uppercase;letter-spacing:.08em;color:var(--warning);margin-bottom:var(--space-sm);align-items:center;gap:6px;font-size:.72rem;font-weight:700;display:inline-flex}.demo-metrics-grid{gap:var(--space-sm);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));display:grid}.demo-metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-sm)}.demo-metric-value{font-family:var(--font-heading);margin:0;font-size:1.15rem}.demo-metric-label{color:var(--text-secondary);margin:2px 0 0;font-size:.72rem}.demo-reset{border-top:1px solid var(--border);padding-top:var(--space-md);align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.demo-reset small{color:var(--text-secondary)}