@font-face{font-family:Onest;src:url('fonts/onest.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Geist;src:url('fonts/geist.woff2') format('woff2');font-weight:400;font-display:swap}

:root{font-family:Geist,Arial,sans-serif;color:#dddfea;background:#080a0f;font-synthesis:none;color-scheme:dark;--muted:#85889b;--indigo:#aaa0ee;--line:rgba(190,190,220,.13);--audio:0}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
button,input,a{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.45;cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #c4c1ff;outline-offset:5px}
a{color:inherit;text-decoration:none}
svg{display:block}
[hidden]{display:none!important}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.app-shell{position:relative;width:100%;height:100svh;height:100dvh;min-height:280px;overflow:hidden;isolation:isolate}
.header{position:absolute;top:30px;left:28px;z-index:5;width:max-content}
.brand{display:flex;align-items:center;gap:11px;width:max-content;font-family:Onest,sans-serif;font-size:23px;font-weight:550;letter-spacing:-1.1px;line-height:1.15;color:#e7e8f1}
.brand svg{width:26px;height:27px;fill:none;stroke:currentColor;stroke-width:1.5}
.brand-dot{align-self:flex-start;margin:3px 0 0 -7px;font-size:8px;letter-spacing:0}
.experience,.stage{position:absolute;inset:0}
.stage{overflow:hidden}
.stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#presence{opacity:0;transition:opacity 180ms cubic-bezier(.16,1,.3,1)}
#presence[data-ready=true]{opacity:1}
@media(prefers-reduced-motion:reduce){#presence{transition:none}}
.stage canvas:active{cursor:grabbing}
.stage canvas:focus-visible{outline-offset:-7px;outline-color:#968eff55}
.stage-vignette{position:absolute;inset:0;pointer-events:none;background:none}

.icon-button,.state,.demo-button,.mic-button{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.icon-button{width:40px;height:40px;border:1px solid var(--line);background:#0a0c1280;color:#9295aa}
.icon-button:hover{border-color:#72718a;color:#edebf9;background:#151622b3}
.icon-button svg,.state svg,.setting-row svg,.motion-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.camera-controls{position:absolute;top:26px;right:28px;z-index:7;display:flex;align-items:center;gap:10px}
.settings-button{position:static}
.settings-button[aria-expanded=true]{border-color:#8c83bf;color:#d6ccff;background:#211d33}
.settings-button svg circle{fill:#0d1017}
.settings-panel{position:absolute;top:80px;right:28px;z-index:8;width:270px;max-width:calc(100vw - 40px);padding:43px 21px 20px;border:1px solid #333340;border-radius:18px;background:#10121bef;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 18px 60px #0005}
.settings-panel .small,.settings-panel #settings-close{position:absolute;top:8px;right:9px;width:28px;height:28px;border-color:transparent;background:transparent}
.settings-panel .small svg{width:15px;height:15px}
.setting-row{display:flex;align-items:center;justify-content:space-between;color:#9195ad}
.setting-row output{color:#b6b1cd;font-size:11px;font-variant-numeric:tabular-nums}
.settings-panel>input{width:100%;margin:6px 0 20px}
.settings-panel>input+.setting-row{margin-top:2px}
.motion-button{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:1px;padding-top:18px;border-top:1px solid var(--line);color:#9598ad}
.toggle-track{display:block;flex-shrink:0;border-radius:20px;background:#343644}
.toggle-track{width:29px;height:17px;padding:3px}
.toggle-track i{display:block;border-radius:50%;background:#a1a3b4;transition:transform .18s,background .18s}
.toggle-track i{width:11px;height:11px}
.motion-button[aria-pressed=true] .toggle-track{background:#6655b9}
.motion-button[aria-pressed=true] .toggle-track i{transform:translateX(12px);background:#e4dcff}

.material-selector{position:absolute;bottom:31px;left:28px;z-index:5;width:205px}
.finish-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}
.material-options{display:flex;align-items:center;gap:7px}
.material{display:flex;align-items:center;justify-content:center;width:30px;height:32px;border-radius:50%}
.material-swatch{position:relative;display:block;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff26}
.material-swatch:after{position:absolute;inset:-5px;border:1px solid transparent;border-radius:50%;content:'';transition:border-color .18s}
.material:hover .material-swatch:after{border-color:#66677e}
.material.active .material-swatch:after,.material[aria-pressed=true] .material-swatch:after{border-color:#aaa0d7}
.titanium{background:linear-gradient(130deg,#636777 5%,#d2d5df 35%,#555967 54%,#b1acdc 95%)}
.amethyst{background:linear-gradient(130deg,#b6a4fa,#51429a 45%,#9571e7 70%,#d1b2f9)}
.glass{background:linear-gradient(130deg,#265b73,#99cdd4 40%,#2d465a 54%,#a2e6eb)}
.opacity-control{display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;column-gap:12px;min-height:25px;width:100%;margin-top:12px}
.opacity-control input{grid-column:1;grid-row:1;width:100%;margin:0}
.opacity-control output{grid-column:2;grid-row:1;text-align:right;color:#a4a0b8;font-size:10px;font-variant-numeric:tabular-nums}
input[type=range]{display:block;appearance:none;-webkit-appearance:none;height:24px;padding:0;border:0;background:transparent;accent-color:#aaa0ee;cursor:ew-resize;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:#555263}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;margin-top:-3.5px;border:0;border-radius:50%;background:#b2a7e9;box-shadow:0 0 0 4px #b2a7e900}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px #b2a7e912}
input[type=range]::-moz-range-track{height:2px;border:0;border-radius:2px;background:#555263}
input[type=range]::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:#b2a7e9}
.state-selector{position:absolute;right:28px;bottom:34px;z-index:5}
.state-options{display:flex;align-items:center;gap:7px}
.state{width:36px;height:36px;border:1px solid transparent;color:#686f85;background:transparent}
.state:hover{color:#b4adc9;background:#15162280}
.state.active,.state[aria-pressed=true]{border-color:#67607880;background:#24203399;color:#c1b5ed}
.state svg{width:17px;height:17px}

.conversation-bar{position:absolute;left:50%;bottom:24px;z-index:6;display:flex;align-items:center;justify-content:center;gap:15px;min-width:178px;padding:8px 10px;border:1px solid #b2a4ed14;border-radius:50px;background:#0a0c1280;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translateX(-50%)}
.signal{display:flex;align-items:center;justify-content:center;gap:2px;width:31px;height:28px}
.signal i{display:block;width:2px;height:4px;min-height:3px;max-height:26px;border-radius:2px;background:#9e91d9}
.primary-actions{display:flex;align-items:center;gap:9px}
.demo-button{width:40px;height:40px;border:1px solid #5a56713d;color:#b7b5c9;background:#17172080}
.demo-button:hover{border-color:#817593;color:#fff;background:#262235}
.demo-button svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}
.mic-button{width:46px;height:46px;border:1px solid #a291ee70;color:#ece8ff;background:linear-gradient(135deg,#7162c9,#53499e);box-shadow:inset 0 1px 0 #e1d7ff1c}
.mic-button:hover{border-color:#baaff0;background:linear-gradient(135deg,#8979df,#6557b1);box-shadow:0 0 24px #8874dc20}
.mic-button.active{border-color:#b9a8ed;background:#332b52;box-shadow:0 0 20px #9b7deb24}
.mic-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.toast{position:fixed;bottom:108px;left:50%;z-index:20;max-width:min(420px,calc(100vw - 40px));width:max-content;padding:12px 17px;border:1px solid #565071;border-radius:12px;background:#201e31f5;color:#ddd8f1;font-size:12px;line-height:1.6;box-shadow:0 10px 40px #0006;transform:translateX(-50%)}
#fallback-mark{position:absolute;top:50%;left:50%;display:none;width:min(38vw,430px);height:54vh;fill:#a09cbf;filter:drop-shadow(0 0 36px #7c62dd35);transform:translate(-50%,-50%)}
.no-webgl #fallback-mark{display:block}
.no-webgl canvas{visibility:hidden}

@media(max-width:899px){
 .material-selector{bottom:112px;width:185px}
 .state-selector{bottom:116px}
 .conversation-bar{bottom:24px}
}
@media(max-width:760px){
 .header{top:24px;left:20px}
 .brand{gap:9px;font-size:21px}
 .brand svg{width:24px;height:25px}
 .camera-controls{top:20px;right:20px;gap:10px}
 .icon-button{width:38px;height:38px}
 .settings-panel{top:72px;right:20px}
 .material-selector{left:20px;bottom:calc(104px + env(safe-area-inset-bottom));width:170px}
 .material-options{gap:3px}
 .material{width:29px}
 .state-selector{right:20px;bottom:calc(108px + env(safe-area-inset-bottom))}
 .state-options{gap:5px}
 .state{width:34px;height:34px}
 .conversation-bar{bottom:calc(24px + env(safe-area-inset-bottom))}
 .toast{bottom:calc(100px + env(safe-area-inset-bottom));font-size:11px}
 #fallback-mark{width:65vw;height:48vh}
}
@media(max-width:520px){
 .state-options{display:grid;grid-template-columns:repeat(2,36px);gap:4px 6px}
 .state{width:36px;height:36px}
 .state-selector{bottom:calc(103px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){
 .brand{font-size:19px;gap:8px}
 .brand svg{width:22px;height:24px}
 .material-selector{width:158px}
 .material-options{gap:2px}
 .material{width:27px}
 .opacity-control{column-gap:9px}
}
@media(max-height:500px) and (min-width:620px){
 .header{top:20px}
 .material-selector{bottom:22px;width:185px}
 .state-selector{bottom:27px}
 .conversation-bar{bottom:17px}
 .settings-panel{top:70px;max-height:calc(100dvh - 90px);overflow-y:auto}
 .toast{bottom:95px}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

.settings-panel{max-height:calc(100dvh - 100px);overflow-y:auto}

.setting-row label{flex:1;margin-left:10px;font-size:11px;line-height:1.5;color:#a8abbf}.opacity-control{row-gap:3px}.opacity-control label{grid-column:1;grid-row:1;color:#9290a5;font-size:10px}.opacity-control input{grid-column:1/-1;grid-row:2}
.warm-setting svg{color:#c99a78}.cool-setting svg{color:#7ca9c9}
.setting-name{flex:1;margin-left:10px;font-size:11px;line-height:1.5;color:#a8abbf}
.range-pair{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:9px 0 22px}
.range-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;line-height:1.5;color:#85899f}
.range-caption output{color:#b6b1cd;font-variant-numeric:tabular-nums}
.range-pair input{width:100%;height:20px;margin:3px 0 0}
.settings-panel{scrollbar-width:thin;scrollbar-color:#454553 transparent}
#theme-toggle[aria-pressed=true]{border-color:#aaa3c5;color:#77648e;background:#eeeaf6}
body[data-theme=light]{color-scheme:light;color:#3b3e49;background:#f8f9fb;--muted:#777b89;--line:rgba(64,70,92,.16)}
body[data-theme=light] .brand{color:#3d414d}
body[data-theme=light] .stage-vignette{background:none}
body[data-theme=light] .icon-button{color:#727685;background:#ffffffa6;border-color:#cfd1db}
body[data-theme=light] .icon-button:hover{color:#3e4051;background:#eef0f5;border-color:#a0a4b3}
body[data-theme=light] .settings-button[aria-expanded=true]{color:#77638c;background:#eeeaf6;border-color:#aaa3c5}
body[data-theme=light] .settings-button svg circle{fill:#faf9fe}
body[data-theme=light] .settings-panel{background:#fffffff0;border-color:#d3d5de;box-shadow:0 18px 60px #252c4414;scrollbar-color:#b5b9c6 transparent}
body[data-theme=light] .setting-row{color:#858a9c}
body[data-theme=light] .setting-row label{color:#646979}
body[data-theme=light] .setting-name{color:#646979}
body[data-theme=light] .range-caption{color:#85899a}
body[data-theme=light] .range-caption output{color:#515667}
body[data-theme=light] .setting-row output{color:#515667}
body[data-theme=light] .opacity-control label,body[data-theme=light] .opacity-control output{color:#777b8b}
body[data-theme=light] input[type=range]::-webkit-slider-runnable-track{background:#c5c8d2}
body[data-theme=light] input[type=range]::-moz-range-track{background:#c5c8d2}
body[data-theme=light] input[type=range]::-webkit-slider-thumb{background:#9583bf}
body[data-theme=light] input[type=range]::-moz-range-thumb{background:#9583bf}
body[data-theme=light] .state{color:#9295a2}
body[data-theme=light] .state:hover{color:#645d78;background:#e8e7ef99}
body[data-theme=light] .state.active,body[data-theme=light] .state[aria-pressed=true]{color:#7c6b98;background:#eeeaf5c0;border-color:#b5acc980}
body[data-theme=light] .conversation-bar{background:#ffffffb0;border-color:#cdd1dd80}
body[data-theme=light] .signal i{background:#9c8bbb}
body[data-theme=light] .demo-button{color:#777387;background:#eeedf480;border-color:#c7c4d780}
body[data-theme=light] .demo-button:hover{color:#5e5475;background:#e7e2f0}
body[data-theme=light] .motion-button{color:#838799}
body[data-theme=light] .toggle-track{background:#d9dbe4}
body[data-theme=light] .toast{color:#575267;background:#ffffffed;border-color:#c0bacf;box-shadow:0 10px 40px #252c4420}
body[data-theme=light] #fallback-mark{fill:#7a7f89;filter:drop-shadow(0 12px 18px #474c5a14)}

.mute-button{width:34px;height:34px;border-color:#5a56716b;background:#17172080}
.mute-button svg{width:16px;height:16px}
.mute-button[aria-pressed=true]{color:#d8b3c9;border-color:#9b658a;background:#3c293a80}
.mic-button[aria-busy=true]{opacity:.65}
body[data-theme=light] .mute-button{background:#eeedf480;border-color:#c7c4d780}

/* F2 reveals the visual workbench; the conversation stays uncluttered. */
body[data-visual-controls=hidden] .visual-control,
body[data-visual-controls=hidden] .settings-panel{display:none!important}
body[data-visual-controls=hidden] .conversation-bar{gap:0;padding:8px;min-width:0}
.mute-button:disabled{opacity:.35;cursor:default}

/* Two clear call controls, matching the supplied microphone / end-call reference. */
body .conversation-bar,body[data-theme=light] .conversation-bar,
body[data-visual-controls=hidden] .conversation-bar{min-width:0;padding:0;gap:20px;border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;bottom:calc(32px + env(safe-area-inset-bottom))}
.primary-actions{gap:28px}
body .mute-button,body .mic-button{width:66px;height:66px;border:0;box-shadow:none;background:#202633;color:#fafbff}
body .mute-button svg,body .mic-button svg{width:24px;height:24px;stroke-width:2}
body .mute-button:hover{background:#2d3544;color:#fff}
body .mute-button[aria-pressed=true]{background:#39303a;color:#edb0b3}
body .mic-button.active{background:#421f24;color:#ff918c;box-shadow:none}
body .mic-button.active:hover{background:#57282d;color:#ffb0a9}
body .mic-button:not(.active) svg{fill:currentColor;stroke:none;width:21px;height:21px}
body[data-theme=light] .mute-button,body[data-theme=light] .mic-button:not(.active){background:#e4e7ed;color:#343d4e}
body[data-theme=light] .mic-button.active{background:#f3d9da;color:#b64249}
body[data-theme=light] .mute-button[aria-pressed=true]{background:#eedcde;color:#a14450}
.transcript-panel{position:absolute;right:28px;top:80px;bottom:132px;z-index:9;display:flex;flex-direction:column;width:360px;max-width:calc(100vw - 40px);max-height:620px;border:1px solid #333743;border-radius:18px;background:#10131ced;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 18px 60px #0004;overflow:hidden}
.transcript-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 18px 12px;flex-shrink:0}
.transcript-header h2{margin:0;font-size:13px;font-weight:500;color:#d3d6e0}
.transcript-header button{width:30px;height:30px;background:transparent;border-color:transparent}
.transcript-empty{margin:12px 20px 24px;color:#8c91a3;font-size:12px;line-height:1.7}
#transcript-messages{list-style:none;margin:0;padding:0 20px 22px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#454553 transparent}
#transcript-messages li{margin:15px 0 22px}
.transcript-speaker{font-size:10px;font-weight:500;letter-spacing:.03em;color:#aaa3c2}
#transcript-messages li[data-speaker=user] .transcript-speaker{color:#8b9fae}
#transcript-messages p{margin:6px 0 0;color:#d0d3df;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
body[data-theme=light] .transcript-panel{background:#fffffff0;border-color:#d3d5de;box-shadow:0 18px 60px #252c4414}
body[data-theme=light] .transcript-header h2,body[data-theme=light] #transcript-messages p{color:#3d4352}
body[data-theme=light] .transcript-speaker{color:#766887}
@media(max-width:620px){.transcript-panel{right:20px;top:72px;bottom:132px}.primary-actions{gap:28px}}

body .mic-button:not(.active):hover{background:#2d3544;color:#fff;box-shadow:none}
body[data-theme=light] .mic-button:not(.active):hover{background:#d7dce5;color:#293345}

.copy-config{position:absolute;left:21px;top:13px;padding:3px 0;font-size:11px;color:#b6adc9;text-decoration:underline;text-underline-offset:3px}
.copy-config:hover{color:#e3dcf5}
#config-json{width:100%;height:180px;margin:0 0 20px;padding:10px;border:1px solid #454052;border-radius:8px;resize:vertical;background:#080b12;color:#ccc9df;font:10px/1.5 ui-monospace,monospace;user-select:text}
body[data-theme=light] .copy-config{color:#77658c}
body[data-theme=light] #config-json{background:#fafbfe;color:#3d4352;border-color:#d3d5de}

.config-actions{position:absolute;left:21px;right:43px;top:13px;display:flex;align-items:center;gap:14px}
.config-actions .copy-config{position:static;padding:3px 0}
.reset-config{padding:3px 0;color:#8e91a7;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.reset-config:hover{color:#e3dcf5}
body[data-theme=light] .reset-config{color:#777d90}

/* Play is a clear, coloured invitation; the active end-call state stays red. */
body .mic-button:not(.active),body[data-theme=light] .mic-button:not(.active){background:#7563c8;color:#fff;box-shadow:inset 0 1px 0 #e4d8ff35,0 0 24px #9981e51c}
body .mic-button:not(.active):hover,body[data-theme=light] .mic-button:not(.active):hover{background:#8873dc;color:#fff;box-shadow:inset 0 1px 0 #f0e7ff45,0 0 28px #9981e52a}