.demo{margin:var(--space-7) 0 0}.demo-stage{border-radius:var(--radius-lg);box-shadow:var(--shadow);color:var(--fg);font-size:var(--text-sm);background:#1a1a1a;border:1px solid #000;grid-template-columns:14rem minmax(0,1fr) minmax(0,21rem);line-height:1.45;display:grid;overflow:hidden}.demo-bar{justify-content:space-between;align-items:center;gap:var(--space-3);padding:0 var(--space-4);color:#8a8a8a;height:34px;font-size:var(--text-xs);background:#0d0d0d;border-bottom:1px solid #000;grid-column:1/-1;display:flex}.demo-bar .modules{gap:var(--space-4);display:flex}.demo-bar .modules span[aria-current]{color:#f0f0f0}.demo-history{background:var(--surface);padding:var(--space-3) 0;border-right:1px solid #000}.demo-panel-title{margin:0 0 var(--space-2);padding:0 var(--space-3);color:#aaa;font-size:var(--text-xs);justify-content:space-between;align-items:center;font-weight:500;display:flex}.demo-history ol{margin:0;padding:0;font-size:.75rem;list-style:none}.demo-history li{padding:.3rem var(--space-3);color:#9e9e9e;white-space:nowrap}.demo-history li>span{text-overflow:ellipsis;display:block;overflow:hidden}.demo-history li.current{color:#f0f0f0;background:#4a4a4a}.demo-photo{padding:var(--space-5);background:#1e1e1e;place-items:center;min-height:0;display:grid;position:relative}.demo-photo svg{border-radius:1px;width:100%;height:auto;box-shadow:0 6px 24px #00000080}.demo-window{background:var(--surface);border-left:1px solid #000;flex-direction:column;min-width:0;display:flex}.demo-window-head{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid #141414;min-height:48px;display:flex}.demo-window-head .name{flex:1;min-width:0;line-height:1.25}.demo-window-head .name b{color:#e6e6e6;font-weight:500;font-size:var(--text-sm);display:block}.demo-window-head .name span{color:#9a9a9a;font-size:.6875rem}.demo-chip{height:24px;padding:0 var(--space-2);color:#e6e6e6;background:#484848;border:1px solid #141414;border-radius:3px;align-items:center;font-size:.6875rem;font-weight:500;display:inline-flex}.demo-transcript{gap:var(--space-3);padding:var(--space-3);flex-direction:column;flex:1;font-size:.8125rem;display:flex}.demo-transcript p{margin:0}.demo-you{max-width:85%;padding:var(--space-2) var(--space-3);color:#e6e6e6;background:#3c3c3c;border-radius:6px;align-self:flex-end}.demo-agent{color:#d0d0d0}.demo-actions{margin:var(--space-1) 0 0;color:#b5b5b5;font-variant-numeric:tabular-nums;padding:0;font-size:.75rem;list-style:none}.demo-actions li{grid-template-columns:16px 1fr;display:grid}.demo-actions li:before{content:"✓";color:var(--ok)}.demo-input{gap:var(--space-2);padding:var(--space-3);border-top:1px solid #141414;display:flex}.demo-input .box{height:28px;padding:0 var(--space-2);color:#8e8e8e;white-space:nowrap;background:#222;border:1px solid #141414;border-radius:3px;flex:1;align-items:center;font-size:.75rem;display:flex;overflow:hidden}.demo-input .demo-chip{background:#5e5e5e;height:28px}.demo figcaption{justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-3);color:var(--fg-faint);font-size:var(--text-sm);flex-wrap:wrap;display:flex}.demo .replay{min-height:36px;font-size:var(--text-xs)}@media (pointer:coarse){.demo .replay{min-height:var(--tap)}}@media (max-width:1080px){.demo-stage{grid-template-columns:minmax(0,1fr) minmax(0,20rem)}.demo-history{padding-block:var(--space-2);border-top:1px solid #000;border-right:0;grid-area:3/1}.demo-history ol{gap:0 var(--space-1);padding:0 var(--space-2);flex-wrap:wrap;display:flex}.demo-history li{padding-inline:var(--space-2);border-radius:3px}.demo-photo{grid-area:2/1}.demo-window{grid-area:2/2/span 2}}@media (max-width:700px){.demo-stage{grid-template-columns:minmax(0,1fr)}.demo-bar .modules span:not([aria-current]){display:none}.demo-photo{padding:var(--space-3)}.demo-history,.demo-photo,.demo-window{grid-column:1}.demo-photo{grid-row:2}.demo-history{grid-row:3}.demo-window{border-top:1px solid #000;border-left:0;grid-row:4}}.demo [style*=--at]{animation-delay:calc(var(--at) * 1s);animation-duration:.45s;animation-timing-function:var(--ease);animation-fill-mode:both}.demo.play .appear{animation-name:demo-appear}.demo.play .demo-history li.current{animation-name:demo-current;animation-duration:.2s}.demo.play .demo-history li.was-current{animation-name:demo-was-current;animation-duration:calc(var(--for) * 1s);animation-timing-function:step-end;animation-fill-mode:none}.demo .scene-cool,.demo .scene-crush{opacity:0}.demo.play .scene-cool,.demo.play .scene-crush{animation-name:demo-fade-out;animation-duration:1.2s}.demo .scene-tilt{transform-box:view-box;transform-origin:50%}.demo.play .scene-tilt{animation-name:demo-straighten;animation-duration:1.1s}.demo .scene-grid{opacity:0}.demo.play .scene-grid{animation-name:demo-grid;animation-duration:2s}@keyframes demo-appear{0%{opacity:0;transform:translateY(6px)}}@keyframes demo-current{0%{color:#9e9e9e;background:0 0}}@keyframes demo-was-current{0%,to{color:#f0f0f0;background:#4a4a4a}}@keyframes demo-fade-out{0%{opacity:1}}@keyframes demo-straighten{0%{transform:rotate(2.4deg)scale(1.09)}}@keyframes demo-grid{0%,to{opacity:0}15%,80%{opacity:1}}@media (prefers-reduced-motion:reduce){.demo .replay{display:none}}