.demo-section{padding:clamp(72px, 10vw, 120px) var(--gutter) 0;scroll-margin-top:var(--header-h)}.demo-panel{max-width:var(--container);grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-areas:"intro console""extra console""outcomes outcomes";gap:28px clamp(32px,6vw,80px);margin-inline:auto;display:grid}.demo-intro{grid-area:intro;align-self:end}.demo-extra{grid-area:extra;align-self:start}.demo-console{grid-area:console;align-self:center}.demo-outcomes{grid-area:outcomes}.demo-intro h2{letter-spacing:-.04em;font-size:clamp(2rem,4vw,3.1rem);font-weight:650;line-height:1.06}.demo-intro h2 span{color:var(--accent-ink)}.demo-lede{max-width:32rem;color:var(--muted);margin-top:16px;font-size:clamp(1rem,1.3vw,1.12rem)}.demo-prompts-label{color:var(--ink);font-size:.9rem;font-weight:600}.demo-prompts ul{flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none;display:flex}.demo-prompts li{border:1px solid var(--line);background:var(--bg-soft);color:var(--ink-2);border-radius:999px;padding:7px 14px;font-size:.9rem}.demo-footer{border-top:1px solid var(--line);gap:6px;margin-top:24px;padding-top:20px;display:grid}.demo-disclosure{color:var(--muted);font-size:.84rem;line-height:1.6}.demo-disclosure a{color:var(--ink);text-decoration:underline;-webkit-text-decoration-color:var(--line-strong);text-decoration-color:var(--line-strong);text-underline-offset:3px}.demo-business-link{min-height:44px;color:var(--ink);justify-self:start;align-items:center;gap:6px;font-size:.92rem;font-weight:600;display:inline-flex}.demo-business-link:hover{color:var(--accent-ink)}.demo-console{isolation:isolate;color:var(--text);padding:clamp(4px,1vw,12px);position:relative;container-type:inline-size}.demo-console:before{content:"";z-index:-1;background:radial-gradient(circle at 1px 1px,#0b0b0d12 1px,#0000 0) 0 0/20px 20px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(60% 55% at 50% 40%,#000 15%,#0000 75%);mask-image:radial-gradient(60% 55% at 50% 40%,#000 15%,#0000 75%)}.demo-topline{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.demo-wordmark{color:var(--ink);letter-spacing:-.03em;flex-wrap:wrap;align-items:center;gap:8px;font-size:.95rem;font-weight:650;display:inline-flex}.demo-wordmark>span{border-left:1px solid var(--line-strong);color:var(--muted);letter-spacing:-.01em;padding-left:8px;font-weight:500}.demo-duration{border:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffb3;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:.74rem;display:inline-flex}.demo-duration svg{width:13px;height:13px}.demo-visual{margin-top:4px;position:relative}.voice-aura{position:relative}.voice-aura-canvas{aspect-ratio:1/.7;width:100%;height:auto;display:block}.voice-skills{flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;display:flex}.voice-skills li{border:1px solid var(--line);color:var(--muted);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffbf;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:.8rem;font-weight:600;transition:color .3s,background .3s;display:inline-flex}.voice-skills li svg{flex:none}.voice-skills li.is-done{background:linear-gradient(#fff, #fff) padding-box, var(--brand-gradient) border-box;color:var(--ink);border-color:#0000;box-shadow:0 6px 18px -8px #fa7a1f99}.voice-skills li.is-done svg{color:var(--accent)}.demo-animation-toggle{z-index:1;width:44px;height:44px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:14px;place-items:center;display:grid;position:absolute;top:0;right:0}.demo-animation-toggle:hover{color:var(--ink)}.demo-animation-toggle svg{width:14px;height:14px}.demo-visual-caption{color:var(--muted);text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:4px;font-size:.9rem;display:flex}.demo-state-dot{background:var(--accent);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #fa7a1f26}.demo-console[data-connected=true] .demo-state-dot{background:#22a45d;animation:1.6s ease-in-out infinite demo-pulse;box-shadow:0 0 0 4px #22a45d29}.demo-controls{text-align:center;justify-items:center;margin-top:18px;display:grid}.demo-start{background:var(--brand-gradient);width:min(100%,340px);min-height:56px;color:var(--ink);overflow-wrap:anywhere;cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:14px 24px;font-size:1.02rem;font-weight:650;transition:transform .15s,filter .15s;display:inline-flex;box-shadow:0 14px 32px -12px #fa7a1fb3,inset 0 1px #ffffff59}.demo-start>svg{flex:0 0 18px;width:18px;height:18px}.demo-start:hover{filter:brightness(1.05);transform:translateY(-1px)}.demo-start-note{color:var(--muted);margin-top:10px;font-size:.84rem}.demo-live-controls{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.demo-control{border:1px solid var(--line-strong);background:var(--surface);max-width:100%;min-height:48px;color:var(--ink);overflow-wrap:anywhere;cursor:pointer;box-shadow:var(--shadow-sm);border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:.94rem;font-weight:600;display:inline-flex}.demo-control>svg{flex:0 0 16px;width:16px;height:16px}.demo-control:hover{background:var(--bg-soft)}.demo-control:disabled{opacity:.45;cursor:default}.demo-end{color:#b4231b;border-color:#f0c4c0}.demo-end:hover{background:#fdf0ef}.demo-cancel{margin-top:12px}.demo-status,.demo-fallback{max-width:30rem;color:var(--muted);margin-top:14px;font-size:.9rem;line-height:1.6}.demo-fallback a{color:var(--ink);text-decoration:underline;-webkit-text-decoration-color:var(--line-strong);text-decoration-color:var(--line-strong);text-underline-offset:3px}:is(.demo-console button:focus-visible,.demo-console a:focus-visible){outline:2px solid var(--accent);outline-offset:3px}.demo-outcomes{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:14px;display:grid}.demo-outcome{border:1px solid var(--line);background:var(--surface);min-width:0;box-shadow:var(--shadow);overflow-wrap:anywhere;border-radius:16px;gap:12px;padding:16px 18px;animation:.5s both flow-in;display:flex}.demo-outcome>div{min-width:0}.demo-outcome-icon{background:var(--ok-soft);width:32px;height:32px;color:var(--ok);border-radius:50%;flex:none;place-items:center;display:grid}.demo-outcome-icon svg{width:16px;height:16px}.demo-outcome .kicker{margin-bottom:4px;font-size:.68rem}.demo-outcome h3{letter-spacing:-.015em;font-size:1rem}.demo-outcome ul{color:var(--muted);margin:8px 0 0;padding-left:0;font-size:.88rem;line-height:1.65;list-style:none}.demo-remote-audio{opacity:0;pointer-events:none;width:1px;height:1px;position:fixed}.turnstile-challenge{z-index:70;right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));left:max(16px, env(safe-area-inset-left));border:1px solid var(--line);background:var(--surface);min-height:65px;box-shadow:var(--shadow-lg);color:var(--text);text-align:center;border-radius:16px;place-items:center;gap:8px;padding:12px;font-size:.86rem;display:grid;position:fixed}.demo-console:is([data-state=verifying],[data-state=connecting],[data-state=speaking],[data-state=ending]) .demo-caption-text{background:linear-gradient(90deg, var(--muted) 20%, var(--accent-3) 50%, var(--muted) 80%) 0 0 / 200% 100%;color:#0000;-webkit-background-clip:text;background-clip:text;animation:1.8s linear infinite demo-shimmer}@keyframes demo-shimmer{to{background-position:-200% 0}}@keyframes demo-pulse{50%{box-shadow:0 0 0 7px #3ecf7f14}}@media (max-width:900px){.demo-panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro""console""outcomes""extra"}.demo-intro{align-self:start}.demo-console{width:100%;max-width:560px}}@media (max-width:380px){.demo-live-controls{flex-direction:column;align-items:stretch}}@media (prefers-reduced-motion:reduce){.demo-start:hover{transform:none}}
