:root{--background:#fafafa;--foreground:#1d1d1f;--muted:#6e6e73;--accent:#0071e3;--paper:#f7f7f5;--line:#1d1d1f1f;--contour:#6f7d52;--contour-strong:#385c21;--take-turn:#a87924;--backchannel:#5c86a6;--yield:#9b594b;color:var(--foreground);background:var(--background);text-rendering:optimizelegibility;font-family:EB Garamond,Georgia,Times New Roman,serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--background);min-width:320px;margin:0}button,pre{font:inherit}button{cursor:pointer}.demo-shell{--speech-energy:0;--action-color:#8b8b86;--action-soft:#6e6e7314;background:var(--background);place-items:center;min-height:100vh;padding:0;display:grid}.demo-shell.is-recording.action-taketurn,.demo-shell.is-speaking.action-taketurn{--action-color:var(--take-turn);--action-soft:#a8792424}.demo-shell.is-recording.action-continue,.demo-shell.is-speaking.action-continue{--action-color:var(--contour-strong);--action-soft:#385c211f}.demo-shell.is-recording.action-backchannel,.demo-shell.is-speaking.action-backchannel{--action-color:var(--backchannel);--action-soft:#5c86a624}.demo-shell.is-recording.action-yield,.demo-shell.is-speaking.action-yield{--action-color:var(--yield);--action-soft:#9b594b24}.demo-stage{aspect-ratio:16/10;border:1px solid var(--line);background:radial-gradient(circle at 18% 14%, #ffffffe0, transparent 24%), var(--paper);background-size:100% 100%,100% 100%;border-radius:8px;grid-template-rows:minmax(0,1fr) auto;gap:clamp(44px,7vh,68px);width:min(100%,160svh);min-height:0;padding:clamp(14px,2.4vw,24px);display:grid;position:relative;overflow:hidden}.ambient-status{z-index:4;color:color-mix(in oklch, var(--muted) 68%, transparent);align-items:center;gap:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.72rem;line-height:1;display:inline-flex;position:absolute;top:clamp(16px,2.5vw,24px);right:clamp(18px,3vw,28px)}.ambient-status span{background:var(--action-color);opacity:.45;border-radius:999px;width:.44rem;height:.44rem}.mode-pill{z-index:4;border:1px solid color-mix(in oklch, var(--foreground) 10%, transparent);background:color-mix(in oklch, var(--paper) 72%, transparent);color:color-mix(in oklch, var(--muted) 72%, transparent);white-space:nowrap;border-radius:999px;padding:.38rem .68rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.72rem;line-height:1;position:absolute;top:clamp(14px,2.4vw,22px);left:clamp(16px,2.8vw,26px)}.ambient-status.is-live span{animation:1.1s ease-in-out infinite dot-breathe}.visual-column{grid-area:1/1;grid-template-rows:minmax(0,1fr) clamp(4.25rem,7.4vh,5.25rem) clamp(3rem,5.4vh,4rem);justify-items:center;min-height:0;padding-top:clamp(52px,9vh,78px);display:grid}.contour-button{aspect-ratio:1;width:clamp(220px,29vw,330px);color:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;outline:none;place-self:center;place-items:center;display:grid;position:relative}.contour-button:focus-visible{outline:1px solid color-mix(in oklch, var(--action-color) 44%, transparent);outline-offset:.75rem}.contour-button:not(:disabled):hover .contour-layer{opacity:calc(var(--opacity) + .08)}.contour-button:disabled{cursor:default;opacity:.72}.contour-button:before{content:"";z-index:0;background:radial-gradient(circle, var(--action-soft), transparent 62%);pointer-events:none;border-radius:999px;position:absolute;inset:-42%}.contour-stack{z-index:1;position:absolute;inset:0}.contour-layer{inset:var(--inset);opacity:var(--opacity);transform-origin:50%;animation:contour-expand var(--speed) ease-in-out infinite, contour-shiver .19s steps(2, end) infinite;animation-delay:var(--delay), calc(var(--delay) * .35);animation-play-state:running;position:absolute}.contour-layer svg{width:100%;height:100%;overflow:visible}.contour-layer path{fill:color-mix(in oklch, var(--action-color) 8%, transparent);stroke:var(--action-color);stroke-width:var(--stroke-width);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.streamed-voice{text-align:center;place-self:center;width:min(620px,100%);min-height:0;max-height:100%;margin-top:0;overflow:hidden}.streamed-voice p{max-width:58ch;min-height:1.5em;color:color-mix(in oklch, var(--foreground) 50%, transparent);margin:0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:clamp(.76rem,1.2vw,.92rem);font-weight:400;line-height:1.5}.demo-shell:not(.is-recording) .streamed-voice p{color:color-mix(in oklch, var(--muted) 56%, transparent);font-size:clamp(.76rem,1.2vw,.9rem)}.selected-action-slot{align-self:stretch;place-items:center;min-height:0;display:grid}.current-action{min-height:1em;color:color-mix(in oklch, var(--action-color) 62%, var(--muted));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.72rem;display:inline-block}.idle-hint{color:color-mix(in oklch, var(--muted) 62%, transparent);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.72rem}.warming-label{min-height:1em;color:color-mix(in oklch, var(--take-turn) 70%, var(--muted));letter-spacing:.02em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.72rem;display:inline-block}.model-warming-note{max-width:34ch;color:color-mix(in oklch, var(--take-turn) 72%, var(--muted));text-align:center;text-wrap:balance;justify-content:center;align-items:center;gap:.5rem;margin:.35rem auto 0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.72rem;line-height:1.5;display:flex}.warming-dots{flex:none;gap:.22rem;display:inline-flex}.warming-dots i{opacity:.35;background:currentColor;border-radius:999px;width:.32rem;height:.32rem;animation:1.1s ease-in-out infinite warming-pulse}.warming-dots i:nth-child(2){animation-delay:.18s}.warming-dots i:nth-child(3){animation-delay:.36s}@keyframes warming-pulse{0%,to{opacity:.25;transform:translateY(0)}50%{opacity:.95;transform:translateY(-.12rem)}}@media (prefers-reduced-motion:reduce){.warming-dots i{opacity:.7;animation:none}}.diagnostic-column{z-index:3;scrollbar-width:thin;scrollbar-color:color-mix(in oklch, var(--muted) 28%, transparent) transparent;grid-area:2/1;place-self:end center;gap:.85rem;width:min(780px,100%);max-height:none;padding-bottom:clamp(18px,3.2vh,28px);display:grid;overflow:visible}.diagnostic-card{color:color-mix(in oklch, var(--foreground) 70%, transparent);padding-inline:clamp(.25rem,2vw,1rem)}.probabilities{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:clamp(.55rem,1.5vw,1rem);display:grid}.probability-row{grid-template-columns:1fr 2.25rem;align-items:center;gap:.42rem .55rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.72rem;display:grid}.probability-row>span:first-child{grid-column:1/-1}.probability-track{background:#1d1d1f14;border-radius:999px;grid-column:1;height:.42rem;overflow:hidden}.probability-row>span:last-child{text-align:right;grid-column:2}.probability-fill{border-radius:inherit;background:var(--action-color);height:100%;transition:width .18s}.probability-fill.action-continue{background:var(--contour-strong)}.probability-fill.action-taketurn{background:var(--take-turn)}.probability-fill.action-backchannel{background:var(--backchannel)}.probability-fill.action-yield{background:var(--yield)}.error-banner{z-index:5;border-left:2px solid var(--yield);background:color-mix(in oklch, var(--yield) 8%, white);color:var(--yield);padding:.65rem .8rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.75rem;position:absolute;bottom:1rem;left:clamp(18px,3vw,28px);right:clamp(18px,3vw,28px)}@keyframes contour-expand{0%,to{opacity:calc(var(--opacity) * (.52 + var(--speech-energy) * .18));transform:scale(calc(.985 + var(--speech-energy) * .018))}50%{opacity:var(--opacity);transform:scale(calc(1 + var(--speech-energy) * .105))}}@keyframes contour-shiver{0%,to{translate:0}50%{translate:calc(var(--speech-energy) * .9px) calc(var(--speech-energy) * -.55px)}}@keyframes dot-breathe{0%,to{opacity:.38;transform:scale(.82)}50%{opacity:1;transform:scale(1.12)}}@media (prefers-reduced-motion:reduce){.contour-layer,.ambient-status{animation:none}}@media (width<=900px){.demo-stage{width:min(100%,160svh);padding:1rem}.visual-column{grid-column:1;padding-top:2.75rem}.contour-button{width:clamp(205px,29vw,300px)}.diagnostic-column{grid-column:1}}@media (width<=720px){.demo-stage{aspect-ratio:4/5;width:min(100%,80svh)}.visual-column{padding-top:3rem}.contour-button{width:min(270px,70vw)}.diagnostic-column{display:none}}@media (width<=560px){.probability-row{grid-template-columns:6.5rem 1fr 2.6rem;gap:.5rem}.streamed-voice p{font-size:.9rem}}.mode-pill-back{border:1px solid color-mix(in oklch, var(--foreground) 10%, transparent);background:color-mix(in oklch, var(--paper) 72%, transparent);color:color-mix(in oklch, var(--muted) 80%, transparent)}.mode-pill-back:hover{color:var(--foreground)}.demo-shell.is-bot-speaking .ambient-status span{background:var(--take-turn);opacity:.7}.bot-line{max-width:52ch;color:color-mix(in oklch, var(--take-turn) 78%, var(--foreground));text-align:center;margin:0 auto;font-family:EB Garamond,Georgia,serif;font-size:clamp(.95rem,1.6vw,1.2rem);font-style:italic;line-height:1.5}.picker-stage{aspect-ratio:16/10;border:1px solid var(--line);background:radial-gradient(circle at 18% 14%, #ffffffe0, transparent 24%), var(--paper);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;width:min(100%,160svh);padding:clamp(28px,5vh,56px) clamp(20px,4vw,48px);display:flex}.picker-kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.62rem}.picker-title{color:var(--foreground);margin:.1rem 0 0;font-family:EB Garamond,Georgia,serif;font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:500}.picker-lede{text-align:center;max-width:48ch;color:var(--muted);margin:0 0 clamp(18px,3vh,32px);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.78rem}.persona-grid{grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);width:100%;max-width:880px;display:grid}.persona-card{border:1px solid var(--line);text-align:left;background:#ffffff80;border-radius:10px;flex-direction:column;gap:.5rem;padding:clamp(16px,1.8vw,22px);transition:border-color .16s,transform .16s,box-shadow .16s;display:flex}.persona-card:hover{border-color:color-mix(in oklch, var(--foreground) 22%, transparent);transform:translateY(-2px);box-shadow:0 8px 24px #1d1d1f14}.persona-dot{border:1.5px solid var(--muted);background:radial-gradient(circle, color-mix(in oklch, var(--muted) 18%, transparent), transparent 65%);border-radius:999px;width:2rem;height:2rem}.persona-balanced .persona-dot{border-color:#8b8b86}.persona-eager .persona-dot{border-color:var(--take-turn);background:radial-gradient(circle, color-mix(in oklch, var(--take-turn) 38%, transparent), transparent 60%)}.persona-polite .persona-dot{border-color:var(--backchannel);background:radial-gradient(circle, color-mix(in oklch, var(--backchannel) 32%, transparent), transparent 60%)}.persona-name{color:var(--foreground);font-family:EB Garamond,Georgia,serif;font-size:1.2rem}.persona-blurb{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.68rem;line-height:1.55}@media (width<=720px){.picker-stage{aspect-ratio:auto;width:min(100%,80svh);min-height:100svh}.persona-grid{grid-template-columns:1fr}}