.demo-section{max-width:1040px;margin:0 auto;padding:0 24px 80px}.demo-intro{color:var(--color-muted-foreground);justify-content:space-between;gap:16px;margin-bottom:14px;padding:0 10px;font-size:13px;display:flex}.demo-shell{background:#eae7e250;border-radius:22px;padding:7px;box-shadow:0 28px 70px -36px #5a473b38,0 8px 20px -12px #5a473b20}.demo-window{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px #fff9,0 1px 5px #43372d12}.demo-titlebar{background:#faf9f7;border-bottom:1px solid #eeeae5;align-items:center;gap:22px;min-height:62px;padding:8px 20px;display:flex}.demo-window-dots{gap:6px;display:flex}.demo-window-dots i{background:#d9d4cd;border-radius:50%;width:8px;height:8px}.demo-agent-picker{color:#373330;align-items:center;gap:8px;min-width:0;font-size:13px;display:flex}.demo-agent-picker select{max-width:160px;min-height:44px;font:inherit;cursor:pointer;background:0 0;padding-right:3px;font-weight:600}.demo-plus{color:#b4aca3;margin:0 6px}.demo-playback-controls{margin-left:auto;display:flex}.demo-playback-controls button{cursor:pointer;color:#746b61;border-radius:8px;place-items:center;min-width:44px;min-height:44px;font-size:20px;display:grid}.demo-playback-controls button:hover{color:#322f2a;background:#eeeae4}.demo-chat-viewport{overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#ded8ce transparent;outline-offset:-4px;height:620px;overflow-y:auto}.demo-chat-content{flex-direction:column;gap:28px;max-width:800px;min-height:100%;margin:auto;padding:32px 36px 40px;display:flex}.demo-user-message{color:#3d3730;background:#eeeae3;border-radius:18px 18px 4px;align-self:flex-end;width:82%;max-width:82%;padding:16px 20px;font-size:15px;line-height:1.75}.demo-user-copy{min-height:52px;display:grid}.demo-copy-measure,.demo-typed-copy{grid-area:1/1}.demo-copy-measure{visibility:hidden;pointer-events:none}.demo-speaker>span{opacity:.6;margin-left:auto;font-size:10px;font-weight:400}.demo-user-message[data-sent=true] .demo-speaker>span{color:#53735f;opacity:.8}.demo-speaker{color:#776a5d;align-items:center;margin-bottom:5px;font-size:12px;font-weight:600;display:flex}.demo-caret{vertical-align:text-bottom;background:#a4543b;width:2px;height:1.1em;margin-left:2px;display:inline-block}.demo-assistant-message{min-width:0}.demo-assistant-label{align-items:center;gap:8px;margin-bottom:16px;font-size:13px;display:flex}.demo-assistant-label>span{color:#7a7065;font-size:12px}.demo-agent-thought,.demo-thinking,.demo-final-answer{color:#625b54;font-size:15px;line-height:1.8}.demo-thinking{align-items:center;gap:10px;display:flex}.demo-thinking-dots{gap:3px;display:flex}.demo-thinking-dots i{background:#a8664d;border-radius:50%;width:4px;height:4px}.demo-tool-stack{background:#fcfbf9;border:1px solid #eee9e2;border-radius:12px;flex-direction:column;gap:13px;margin:20px 0;padding:14px 16px;display:flex}.demo-tool-call{grid-template-columns:14px max-content minmax(0,1fr);align-items:center;gap:3px 10px;font-size:12px;display:grid}.demo-tool-call code{color:#51463c;font-size:11px}.demo-tool-call>span:last-child{color:#766c61;text-align:right;justify-self:end}.demo-tool-check{color:#61866e;font-size:13px}.demo-spinner{border:1.5px solid #dccfc3;border-top-color:#a85b3f;border-radius:50%;flex-shrink:0;width:12px;height:12px;display:inline-block}.demo-progress-row{font-family:var(--typo-mono), monospace;color:#8e7765;align-items:center;gap:12px;padding:12px 0 0 24px;font-size:10px;display:flex}.demo-progress-track{background:#e9e3da;border-radius:4px;flex:1;height:3px;overflow:hidden}.demo-progress-track>span{background:#b06a4d;border-radius:4px;height:100%;display:block}.demo-inline-asset{background:#f6f4f0;border:1px solid #e7e1d9;border-radius:12px;margin-top:20px;overflow:hidden}.demo-media-stage{background:#efede8;height:380px;position:relative;overflow:hidden}.demo-media-stage video{object-fit:contain;background:#181b17;width:100%;height:100%}.demo-inline-asset figcaption{background:#fff;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;display:flex}.demo-inline-asset figcaption strong{font-size:13px;font-weight:500;display:block}.demo-inline-asset figcaption span{color:#807365;margin-top:3px;font-size:11px;display:block}.demo-inline-asset figcaption a{background:#f7f5f1;border-radius:8px;place-items:center;min-width:44px;min-height:44px;font-size:20px;display:grid}.demo-inline-asset figcaption a:hover{color:#9e513a;background:#eee8df}.demo-final-answer{margin-top:18px}.demo-media-loading{color:#796d60;background:#efede8ed;justify-content:center;align-items:center;gap:10px;font-size:13px;display:flex;position:absolute;inset:0}.demo-model{position:absolute;inset:0}.demo-orbit-controls{white-space:nowrap;background:#ffffffed;border-radius:8px;align-items:center;padding:0 4px;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #443a2912}.demo-orbit-controls button{cursor:pointer;min-width:44px;min-height:44px;padding:0 10px;font-size:12px}.demo-orbit-controls button:hover{color:var(--color-primary)}.demo-viewer-notice{text-align:center;background:#ffffffed;border-radius:8px;width:max-content;max-width:90%;padding:10px 16px;font-size:12px;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.demo-audio{background:radial-gradient(at top,#f5e2d2,#efede8 75%);flex-direction:column;justify-content:center;align-items:center;min-height:100%;padding:24px;display:flex}.demo-audio-icon{color:#a05840;background:#fff8;border:1px solid #fff;border-radius:50%;place-items:center;width:54px;height:54px;margin-bottom:16px;font-size:28px;display:grid}.demo-audio>strong{font-family:var(--typo-serif), serif;font-size:27px;font-weight:400}.demo-audio>span:not(.demo-audio-icon){color:#8b7665;margin-top:7px;font-size:12px}.demo-audio audio{width:100%;max-width:420px;margin-top:24px}.demo-audio details{color:#6f6154;max-width:420px;margin-top:14px;font-size:12px;line-height:1.8}.demo-audio summary{cursor:pointer;text-align:center;min-height:32px}.demo-kind-audio .demo-media-stage{height:auto;min-height:320px}.demo-static-example{gap:16px;display:grid}.demo-static-example img{border-radius:12px;max-width:100%;height:auto}@media (prefers-reduced-motion:no-preference){.demo-user-message{animation:.3s ease-out demo-reveal}.demo-spinner{animation:.9s linear infinite demo-spin}.demo-caret{animation:.9s step-end infinite demo-blink}.demo-thinking-dots i{animation:1.2s ease-in-out infinite demo-think}.demo-thinking-dots i:nth-child(2){animation-delay:.15s}.demo-thinking-dots i:nth-child(3){animation-delay:.3s}.demo-assistant-message,.demo-tool-call,.demo-inline-asset,.demo-final-answer{animation:.24s ease-out demo-reveal}.demo-progress-track>span{transition:width .1s linear}}@keyframes demo-spin{to{transform:rotate(360deg)}}@keyframes demo-blink{50%{opacity:0}}@keyframes demo-think{50%{opacity:.35;transform:translateY(-2px)}}@keyframes demo-reveal{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media (max-width:767px){.demo-section{padding:0 16px 56px}.demo-intro{padding:0 4px;font-size:11px}.demo-intro>span:first-child{display:none}.demo-shell{border-radius:17px;padding:5px}.demo-window{border-radius:12px}.demo-titlebar{gap:8px;min-height:56px;padding:5px 10px}.demo-window-dots{display:none}.demo-agent-picker{gap:5px;font-size:12px}.demo-agent-picker select{max-width:128px}.demo-plus{margin:0 2px}.demo-playback-controls button{min-width:44px}.demo-chat-viewport{height:540px}.demo-chat-content{gap:24px;padding:22px 16px 30px}.demo-user-message{width:93%;max-width:93%;padding:13px 16px;font-size:14px}.demo-agent-thought,.demo-thinking,.demo-final-answer{font-size:14px}.demo-tool-stack{padding:12px}.demo-tool-call{grid-template-columns:12px minmax(0,1fr);column-gap:8px}.demo-tool-call>span:last-child{text-align:left;grid-column:2;justify-self:start;font-size:11px}.demo-media-stage{height:280px}.demo-inline-asset figcaption{padding:8px 10px}.demo-audio{padding:22px 12px}.demo-audio>strong{text-align:center;font-size:23px}.demo-audio audio{min-width:0}}@media (max-width:374px){.demo-agent-picker>span:last-child,.demo-plus{display:none}.demo-agent-picker select{max-width:120px}.demo-media-stage{height:245px}}.demo-section[data-paused=true] *{animation-play-state:paused!important}