.demo{height:100vh;color:var(--demo-text);background-color:var(--demo-bg);background-image:radial-gradient(circle, var(--demo-dot) 1px, transparent 1px);background-size:22px 22px;flex-direction:column;display:flex;overflow:hidden}.demo-topbar{align-items:center;gap:var(--spacing-sm);border-bottom:1px solid var(--demo-border);background:var(--demo-surface);flex:none;padding:.6rem 1rem;display:flex}.demo-topbar-heading{flex-direction:column;gap:.15rem;min-width:0;display:flex}.demo-eyebrow{text-transform:uppercase;letter-spacing:.1em;color:var(--color-primary);margin:0;font-size:.7rem;font-weight:600}.demo-title{white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:1.15rem;overflow:hidden}.demo-stage-count{color:var(--demo-muted);white-space:nowrap;font-size:.8rem}.demo-topbar-actions{align-items:center;gap:var(--spacing-sm);margin-left:auto;display:flex}.demo-ai-chip{background:var(--demo-accent-soft);border:1px solid var(--demo-accent);color:var(--demo-accent-bright);white-space:nowrap;box-shadow:0 0 12px var(--demo-accent-glow);border-radius:999px;align-items:center;gap:.4rem;padding:.35rem .7rem;font-size:.75rem;font-weight:600;display:inline-flex}.demo-cta{align-items:center;gap:var(--spacing-xs);background:var(--demo-accent);color:var(--demo-on-accent);white-space:nowrap;box-shadow:0 4px 16px var(--demo-accent-glow);border-radius:.5rem;padding:.5rem 1rem;font-weight:600;display:inline-flex}.demo-cta:hover{background:var(--demo-accent-deep);color:var(--demo-on-accent);transform:translateY(-1px)}.demo-cta-icon{font-size:.9rem}.demo-back{border:1px solid var(--demo-border);color:var(--demo-muted);white-space:nowrap;border-radius:.5rem;flex:none;align-items:center;gap:.35rem;padding:.35rem .7rem;font-size:.8rem;font-weight:600;display:inline-flex}.demo-back:hover{border-color:var(--demo-accent);color:var(--demo-accent-bright)}.demo-body{flex:auto;gap:.75rem;width:100%;max-width:1180px;min-height:0;margin:0 auto;padding:2.25rem 1.75rem;display:flex;overflow:hidden}.demo-content{background:var(--demo-surface);border:1px solid var(--demo-border);min-width:0;box-shadow:var(--demo-shadow);border-radius:1rem;flex-direction:column;flex:auto;display:flex;overflow:hidden}.demo-stage-header{align-items:center;gap:var(--spacing-sm);border-bottom:1px solid var(--demo-border);flex:none;padding:.75rem 1.25rem;display:flex}.demo-stage-badge{background:var(--demo-accent-soft);width:40px;height:40px;color:var(--demo-accent-bright);box-shadow:0 0 12px var(--demo-accent-glow);border-radius:.6rem;justify-content:center;align-items:center;font-size:1.15rem;display:inline-flex}.demo-stage-title{margin:0;font-size:1.25rem}.demo-stage{flex:auto;min-height:0;padding:1.25rem;overflow-y:auto}.demo-stub{text-align:center;color:var(--color-text-light)}.demo-footer{border-top:1px solid var(--demo-border);background:var(--demo-surface);flex:none;padding:.6rem 1rem}.demo-nav{justify-content:space-between;align-items:center;gap:var(--spacing-sm);display:flex}.demo-btn{border-radius:.5rem;padding:.6rem 1.25rem;font-size:.95rem;font-weight:600}.demo-btn:disabled{opacity:.4;cursor:not-allowed}.demo-btn-ghost{color:var(--color-text);border:1px solid var(--color-border);background:0 0}.demo-btn-ghost:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.demo-btn-primary{background:var(--demo-accent);color:var(--demo-on-accent)}.demo-btn-primary:hover:not(:disabled){background:var(--demo-accent-deep)}@media (max-width:968px){.demo{height:auto;min-height:100vh;overflow:visible}.demo-topbar{flex-wrap:wrap}.demo-body{flex-direction:column;overflow:visible}.demo-content,.demo-stage{overflow:visible}}@media (max-width:768px){.demo-body{padding:.5rem}.demo-stage,.demo-stage-header{padding:1rem}.demo-nav{flex-wrap:wrap}}
.ai-panel{max-width:640px;margin:0 auto var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:var(--demo-surface-2);border:1px solid var(--demo-border);border-left:3px solid var(--demo-accent-bright);border-radius:.6rem}.ai-panel-head{align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm);display:flex}.ai-panel-badge{background:var(--demo-accent-soft);width:26px;height:26px;color:var(--demo-accent-bright);border-radius:50%;justify-content:center;align-items:center;font-size:.85rem;display:inline-flex}.ai-panel-title{color:var(--demo-text);font-size:.9rem;font-weight:600}.ai-panel-state{text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;margin-left:auto;font-size:.7rem}.ai-panel-state.is-working{color:var(--demo-accent-bright)}.ai-panel-state.is-working:before{content:"";background:var(--demo-accent-bright);vertical-align:middle;border-radius:50%;width:6px;height:6px;margin-right:.4rem;animation:1s ease-in-out infinite ai-panel-pulse;display:inline-block}.ai-panel-state.is-done{color:var(--demo-muted)}@keyframes ai-panel-pulse{0%,to{opacity:1}50%{opacity:.3}}.ai-panel-lines{flex-direction:column;gap:.35rem;list-style:none;display:flex}.ai-panel-line{color:var(--demo-muted);opacity:0;padding-left:1rem;font-size:.88rem;transition:opacity .3s,transform .3s;position:relative;transform:translateY(4px)}.ai-panel-line:before{content:"▸";color:var(--demo-accent-bright);position:absolute;left:0}.ai-panel-line.is-shown{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.ai-panel-state.is-working:before{animation:none}.ai-panel-line{transition:none}}