.agent-carousel [hidden],.agent-demo-controls[hidden]{display:none!important}
.agent-carousel-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.agent-carousel-tabs button,.agent-carousel-controls button{font:600 14px/1.3 var(--body,Inter,sans-serif);border:1px solid var(--line);border-radius:100px;background:var(--paper);color:var(--ink);padding:12px 18px;cursor:pointer}
.agent-carousel-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.agent-carousel-tabs button:hover:not([aria-selected=true]){background:#fff0e9;color:#5b4038}
.agent-carousel button:focus-visible,.agent-demo-controls button:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.agent-example-trigger{margin:0 0 18px;padding:18px 24px;border:1px solid #efc7b0;background:#fff4eb;border-radius:18px;display:flex;gap:18px;align-items:center;line-height:1.5}
.agent-example-trigger>span{font-size:11px;text-transform:uppercase;letter-spacing:.07em;flex-shrink:0;color:#a13d29;font-weight:700}
.agent-example-trigger>strong{font-size:16px;font-weight:600;color:#5b4038}
.agent-carousel .agent-compare-card{padding:28px;min-height:305px}
.agent-carousel .agent-assisted{background:#ffd8ba;color:#5b4038;border:1px solid #efb69c}
.agent-carousel .agent-assisted h3{color:#5b4038}
.agent-carousel .agent-assisted:before{background:#ff9f83;opacity:.25}
.agent-carousel .agent-compare-card h3{font-size:28px;margin:20px 0 15px}
.agent-example-actions{position:relative;padding-left:20px;margin:0;font-size:15px;line-height:1.65}
.agent-example-actions li+li{margin-top:10px}
.agent-example-actions li::marker{font-weight:700;color:#a13d29}
.agent-example-result{display:flex;gap:15px;align-items:baseline;margin:18px 0 0;padding:17px 23px;border-left:3px solid var(--coral);background:#fff4eb;border-radius:0 12px 12px 0;font-size:15px;line-height:1.65;color:#5b4038}
.agent-example-result strong{flex-shrink:0}
.agent-carousel-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px}
.agent-carousel-controls button{width:44px;height:44px;padding:11px;display:grid;place-items:center}
.agent-carousel-controls button:hover{background:#ffd8ba;color:#5b4038}
.agent-carousel-controls svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.agent-carousel-count{font-size:13px;color:#716a70;min-width:98px;text-align:center}
.agent-carousel .agent-guard{font-size:13px;max-width:none}
.agent-example.is-entering{animation:example-enter .25s ease-out}
@keyframes example-enter{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
.agent-demo-controls{display:flex;gap:12px;align-items:center;margin-top:14px;min-height:30px}
.agent-demo-status{font-size:10px;line-height:1.4;color:#71635e;flex:1}
.agent-demo-controls button{border:0;background:transparent;color:var(--coral-dark);font:600 11px/1.2 var(--body,Inter,sans-serif);padding:6px 0;cursor:pointer}
.agent-demo-reply{position:relative}
.agent-demo-drafting{display:none;position:absolute;inset:32px 15px 15px;align-content:center;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap;font-size:11px;text-align:center;color:#5b4038}
.agent-demo-drafting b{width:100%;font-weight:500;margin-top:7px}
.agent-demo-drafting i{width:5px;height:5px;border-radius:50%;background:#a3432c;animation:agent-dot 1s ease-in-out infinite}
.agent-demo-drafting i:nth-child(2){animation-delay:.15s}.agent-demo-drafting i:nth-child(3){animation-delay:.3s}
.agent-demo-surface.is-animated .agent-demo-worker li{transition:background .35s ease,opacity .35s ease;opacity:.8}
.agent-demo-surface.is-animated .agent-demo-worker li.is-current{opacity:1;background:#fff0e4;box-shadow:0 0 0 6px #fff0e4;border-radius:5px}
.agent-demo-surface.is-animated .agent-demo-worker li.is-done{opacity:1}
.agent-demo-surface.is-animated li:not(.is-done) .agent-demo-check svg{visibility:hidden}
.agent-demo-surface.is-animated li.is-current .agent-demo-check{border:2px solid #e8b396;border-top-color:#a3432c;animation:agent-spin .85s linear infinite}
.agent-demo-surface.is-animated .agent-demo-reply>p,.agent-demo-surface.is-animated .agent-demo-reply>small{transition:opacity .45s ease}
.agent-demo-surface.is-animated:not(.is-complete) .agent-demo-reply>p{opacity:0}
.agent-demo-surface.is-animated:not(.is-complete) .agent-demo-reply>small{opacity:.7}
.agent-demo-surface.is-animated:not(.is-complete) .agent-demo-drafting{display:flex}
.agent-demo-surface.is-animated.is-receiving .agent-demo-message{animation:agent-message .7s ease-out both}
.agent-demo-surface.is-animated.is-receiving .agent-demo-message+.agent-demo-arrow svg,.agent-demo-surface.is-animated.is-drafting .agent-demo-arrow svg{animation:agent-travel .9s ease-in-out infinite}
.agent-demo-surface.is-paused *{animation-play-state:paused!important}
@keyframes agent-spin{to{transform:rotate(360deg)}}
@keyframes agent-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes agent-message{from{opacity:.3;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes agent-travel{0%,100%{opacity:.4;transform:translateY(-2px)}50%{opacity:1;transform:translateY(3px)}}
[data-theme=dark] .agent-example-trigger,[data-theme=dark] .agent-example-result{background:#30251f;border-color:#79513f;color:#ffe2cc}
[data-theme=dark] .agent-example-trigger>strong,[data-theme=dark] .agent-example-trigger>span{color:#ffe2cc}
[data-theme=dark] .agent-carousel-count,[data-theme=dark] .agent-demo-status{color:#c9bfce}
[data-theme=dark] .agent-demo-surface.is-animated .agent-demo-worker li.is-current{background:#49332e;box-shadow:0 0 0 6px #49332e}
[data-theme=dark] .agent-carousel .agent-assisted{background:#ffd8ba;border-color:#efb69c}
[data-theme=dark] .agent-carousel .agent-assisted .agent-example-actions{color:#5b4038}
@media(max-width:600px){.agent-carousel-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.agent-carousel-tabs button{font-size:12px;padding:11px 9px}.agent-example-trigger{display:block;padding:16px 18px}.agent-example-trigger>span{display:block;margin-bottom:7px}.agent-example-trigger>strong{font-size:15px}.agent-carousel .agent-compare-card{min-height:0;padding:23px 20px}.agent-carousel .agent-compare-card h3{font-size:25px}.agent-example-result{display:block;padding:15px 18px}.agent-example-result strong{display:block;margin-bottom:5px}.agent-demo-controls{gap:10px}.agent-demo-status{font-size:10px}}
@media(prefers-reduced-motion:reduce){.agent-example.is-entering,.agent-demo-surface *{animation:none!important;transition:none!important}}

/* Editorial notes use the site's layered shapes instead of alert boxes. */
.agent-scope-note{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1.65fr);gap:28px;align-items:center;margin:46px 8px 12px;padding:32px 36px;border:0;border-radius:0;background:transparent}
.agent-scope-note::before,.agent-scope-note::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:30px 18px 32px 20px}
.agent-scope-note::before{inset:5px -6px -7px 5px;background:#ffb49e;transform:rotate(.65deg)}
.agent-scope-note::after{inset:0;background:#ffd8ba;transform:rotate(-.6deg)}
.agent-scope-note h3{max-width:330px;margin:0;font-size:25px;line-height:1.2;color:#5b4038}
.agent-scope-note h3::before{content:"";display:block;width:34px;height:4px;border-radius:8px;background:#ed8268;margin-bottom:15px}
.agent-scope-note p{margin:0;font-size:15px;line-height:1.7;color:#674c42}
.agent-example-result{border:0;border-radius:0;background:transparent;padding:19px 0 0;border-top:1px solid var(--line);color:var(--ink)}
.agent-example-result strong{color:var(--coral-dark)}
.agent-guard,.agent-carousel .agent-guard{padding:18px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;color:var(--muted,#716a70)}
[data-theme=dark] .agent-scope-note{background:transparent}
[data-theme=dark] .agent-scope-note h3{color:#5b4038}
[data-theme=dark] .agent-scope-note p{color:#674c42}
[data-theme=dark] .agent-example-result,[data-theme=dark] .agent-guard{background:transparent;border-color:var(--line);color:#c9bfce}
[data-theme=dark] .agent-example-result strong{color:#ffad91}
@media(max-width:700px){.agent-scope-note{grid-template-columns:1fr;gap:14px;margin:32px 6px 10px;padding:26px 24px}.agent-scope-note h3{font-size:23px;max-width:none}.agent-scope-note h3::before{margin-bottom:12px}.agent-scope-note p{font-size:14px}.agent-scope-note::before{inset:4px -3px -5px 3px}.agent-scope-note::after{transform:rotate(-.8deg)}}

