:root{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#22272b;background:#fbfcfd;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;font-weight:400;--muted:#858c91;--line:#e9ecee;--blue:#202528}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse 58% 43% at 50% 37%,rgba(239,247,250,.78),transparent 74%),linear-gradient(180deg,#fff 0%,#fafbfc 70%,#f8fafb 100%)}
button,a,select,input{font:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #8bbbd2;outline-offset:4px}
.topbar{height:94px;padding:20px 5vw;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.brand{display:flex;align-items:center;width:154px;height:42px}.brand img{width:100%;height:100%;object-fit:contain;object-position:left center;mix-blend-mode:multiply}
.settings-link{display:inline-flex;align-items:center;gap:9px;color:#677077;font-size:13px;transition:color .18s}.settings-link:hover,.text-action:hover{color:#1d2529}.gear{font-size:16px;line-height:1;color:#8b9398}
main{min-height:calc(100svh - 94px)}
.page{min-height:calc(100svh - 94px);position:relative;padding:0 24px 30px;animation:page-in .36s ease both}.page[hidden]{display:none!important}body[data-page="talk"] .talk-page{display:block!important}body[data-page="agents"] .agents-page{display:flex!important}body[data-page="settings"] .settings-page{display:flex!important}
@keyframes page-in{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.talk-stage{min-height:calc(100svh - 185px);display:flex;align-items:center;flex-direction:column;padding-top:clamp(22px,5vh,58px)}
.orb-wrap{height:clamp(250px,36vh,350px);width:min(78vw,350px);display:grid;place-items:center;flex:none}
#orb{display:block;width:100%;height:100%;max-width:350px;max-height:350px}
.active-agent-title{margin:18px 0 0;color:#273a43;font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.15;letter-spacing:-.03em;text-align:center}
.agent-caption{margin:0;display:flex;align-items:center;gap:11px;font-size:13px}.agent-caption span:first-child{font-weight:600;color:#252b2e}.agent-caption span:last-child{color:#989fa4;font-size:12px}
.conversation{width:min(540px,90vw);max-height:clamp(90px,17vh,160px);overflow:auto;scrollbar-width:none;margin:18px auto 0;padding:0;display:flex;flex-direction:column;gap:13px}.conversation:empty{display:none}.conversation::-webkit-scrollbar{display:none}
.transcript-line{margin:0;padding:18px 28px;background:#e7f6f9;color:#2f4852;text-align:center;font-size:24px;font-weight:500;line-height:1.25;letter-spacing:-.02em;animation:line-in .24s ease both}.speaker-label{display:inline;margin:0 9px 0 0;color:inherit;font-size:inherit;font-weight:600;line-height:inherit;letter-spacing:inherit}.transcript-copy{color:inherit;unicode-bidi:plaintext}.is-demo .transcript-copy{font-size:24px;color:inherit}.is-partial{background:#e7f6f9}.is-partial .transcript-copy{color:#2f4852}
@keyframes line-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.talk-controls{display:flex;align-items:center;flex-direction:column;margin-top:clamp(34px,7vh,74px)}.model-picker{display:inline-flex;align-items:center;gap:9px;margin:12px 0 2px;padding:6px 10px;border:1px solid #e8edef;border-radius:999px;background:rgba(255,255,255,.72);color:#9aa3a7;font-size:9px;letter-spacing:.12em}.model-picker select{border:0;background:transparent;color:#546168;font-size:11px;outline:none}.voice-state{height:18px;margin:0 0 14px;color:#8a9398;font-size:12px;letter-spacing:.015em}
.talk-button{min-width:176px;height:52px;border:1px solid #dce1e4;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:0 8px 28px rgba(48,67,77,.055);color:#343b3f;display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;transition:transform .18s,border-color .2s,background .2s,box-shadow .2s;touch-action:none;user-select:none}.talk-button:hover{border-color:#b8c7ce;transform:translateY(-1px);box-shadow:0 10px 30px rgba(48,67,77,.09)}.talk-button:active,.talk-button.is-active{background:#f0f7f9;border-color:#a6c5d1;transform:scale(.98)}.mic-icon{width:19px;height:19px;display:grid;place-items:center}.mic-icon svg{width:19px;fill:none;stroke:#626e73;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shortcut{margin:13px 0 0;color:#9aa1a5;font-size:11px}kbd{display:inline-flex;min-width:21px;min-height:19px;align-items:center;justify-content:center;padding:1px 5px;border:1px solid #e1e5e7;border-radius:5px;background:rgba(255,255,255,.75);font-size:10px;color:#6d777c;box-shadow:0 1px 0 #e1e5e7}.demo-note{margin:11px 0 0;color:#afb5b8;font-size:10px;letter-spacing:.02em}.page-actions{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center}.text-action{color:#777f84;font-size:12px;transition:color .18s}.text-action span{margin-left:5px;color:#a0a7aa}
.agents-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100svh - 94px);padding-bottom:76px}.selection-stage{width:min(100%,1100px);text-align:center;margin-top:-10px}.eyebrow{margin:0;color:#9ca5a9;font-size:10px;letter-spacing:.17em;font-weight:600}.carousel{position:relative;height:clamp(210px,35vh,330px);width:100%;margin:20px auto 0;perspective:1000px;overflow:hidden}.carousel-agent{--size:clamp(112px,19vw,218px);--step:clamp(69px,18vw,205px);position:absolute;left:50%;top:50%;width:var(--size);padding:0;border:0;background:transparent;transform:translate(calc(-50% + var(--offset)*var(--step)),calc(-50% + var(--depth)*9px)) scale(calc(1 - var(--depth)*.105));opacity:calc(1 - var(--depth)*.16);z-index:calc(4 - var(--depth));cursor:pointer;transition:transform .58s cubic-bezier(.2,.8,.2,1),opacity .42s ease,filter .42s ease;filter:saturate(calc(1 - var(--depth)*.16));-webkit-tap-highlight-color:transparent}.carousel-orb{width:100%;aspect-ratio:1;display:block;user-select:none}.carousel-agent::after{content:"";position:absolute;left:20%;right:20%;bottom:37px;height:20px;background:rgba(101,125,136,.09);filter:blur(17px);border-radius:50%;opacity:calc(1 - var(--depth)*.42);pointer-events:none}.carousel-agent.is-selected{filter:none}.carousel-name{display:block;margin-top:7px;color:#879095;font-size:12px;transition:color .3s,font-size .3s}.carousel-agent.is-selected .carousel-name{color:#283034;font-size:13px;font-weight:600}.selection-meta{margin-top:4px}.selection-meta h1,.settings-content h1{font-size:20px;line-height:1.2;font-weight:500;margin:0;color:#232a2e}.selection-meta>p{margin:6px 0 0;color:#838c91;font-size:12px}.selection-meta .preview-state{margin-top:17px;color:#a3aaad;font-size:10px;letter-spacing:.025em}.selection-footer{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:center}.choose-button{min-height:45px;padding:0 22px;border:1px solid #d9dfe2;border-radius:999px;background:#fff;color:#323a3e;font-size:12px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}.choose-button:hover{background:#f5f8f9;border-color:#b9c7cd;transform:translateY(-1px)}
.settings-page{display:flex;align-items:flex-start;justify-content:center;padding:clamp(28px,7vh,62px) 24px 50px}.settings-content{width:min(100%,520px)}.settings-back{display:inline-flex;align-items:center;gap:10px;margin:0 0 30px;padding:10px 16px;border:1px solid #d9e4e8;border-radius:999px;background:linear-gradient(135deg,#fff,#f2f8fa);box-shadow:0 7px 22px rgba(53,83,94,.09);color:#34484f;font-size:12px;font-weight:600;letter-spacing:.01em;transition:transform .18s,box-shadow .18s,border-color .18s}.settings-back span:first-child{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e1f0f3;color:#52717b;font-size:16px;line-height:1}.settings-back:hover{transform:translateY(-2px);border-color:#b9d1d8;box-shadow:0 10px 26px rgba(53,83,94,.14)}.settings-content h1{font-size:22px;margin:14px 0 30px}.setting-row{min-height:59px;padding:10px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;color:#3d464a;font-size:13px}.setting-row>span:first-child{color:#515b60}.setting-row select{width:min(250px,54vw);padding:8px 28px 8px 10px;border:1px solid #e5e9eb;border-radius:8px;background:rgba(255,255,255,.7);color:#647076;font-size:12px}.setting-row select:disabled{opacity:.6}.settings-gallery-link{display:inline-block;margin:18px 0 4px;font-size:12px}.permission-row>span:last-child,.shortcut-row>span:last-child{color:#939ca1;font-size:12px}.volume-control{display:flex;align-items:center;gap:12px;color:#899297;font-size:12px}.volume-control input{width:150px;accent-color:#8eb6c5}.settings-footnote{margin:20px 0 28px;color:#9aa2a6;font-size:11px;line-height:1.6}
.toast{position:fixed;z-index:10;left:50%;bottom:25px;transform:translate(-50%,10px);max-width:90vw;padding:10px 15px;border:1px solid #e5e9eb;border-radius:99px;background:rgba(255,255,255,.95);box-shadow:0 8px 30px #34444b14;color:#687278;font-size:12px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:650px){.topbar{height:78px;padding:16px 21px}.brand{width:130px;height:36px}.settings-link{font-size:12px}main,.page,.agents-page{min-height:calc(100svh - 78px)}.talk-stage{min-height:calc(100svh - 155px);padding-top:clamp(12px,5vh,40px)}.orb-wrap{height:clamp(220px,34vh,300px);width:min(82vw,310px)}#orb{max-width:310px;max-height:310px}.active-agent-title{font-size:28px;margin-top:14px}.conversation{margin-top:13px}.talk-controls{margin-top:clamp(36px,7vh,58px)}.carousel{height:clamp(160px,27vh,235px);margin-top:18px}.carousel-agent{--size:clamp(104px,25vw,152px);--step:clamp(48px,17vw,105px)}.carousel-agent::after{bottom:29px}.agents-page{padding-left:8px;padding-right:8px;padding-bottom:72px}.selection-stage{margin-top:-4px}.selection-meta h1{font-size:19px}.settings-page{padding-top:45px}.setting-row{font-size:12px}.volume-control input{width:105px}}
@media(max-height:680px) and (min-width:651px){.talk-stage{padding-top:4px}.orb-wrap{height:250px;width:250px}.talk-controls{margin-top:14px}.agents-page{padding-top:10px}.carousel{height:230px;margin-top:5px}.carousel-agent{--size:175px;--step:160px}.selection-stage{margin-top:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}