*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier New,monospace;background:#0a0a1a;color:#eee;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;width:100%}.subtitle{font-size:11px;color:#555;text-transform:uppercase;letter-spacing:3px;margin-bottom:60px}.embodiment-wrapper{position:relative;width:200px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center}.orb-container{position:absolute;width:200px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center}.orb-container.hidden{display:none}.orb{width:100px;height:100px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#5ba3ff,#3b82f6,#1e40af);box-shadow:0 0 60px #3b82f6cc,0 0 120px #3b82f666,inset 0 0 30px #fff3;transition:all .5s ease;opacity:0}.orb.visible{opacity:1}.agent-embodiment-container{position:absolute;width:300px;height:300px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease}.agent-embodiment-container.hidden{display:none}.agent-embodiment-container.visible{opacity:1}.orb.idle{animation:breathe 4s ease-in-out infinite}.orb.listening{animation:pulse 1s ease-in-out infinite;box-shadow:0 0 80px #3b82f6e6,0 0 160px #3b82f680}.orb.thinking{animation:spin 1.5s linear infinite}.orb.speaking{animation:none!important;transition:none!important}.spinner{width:40px;height:40px;border:3px solid rgba(59,130,246,.2);border-top-color:#3b82f6;border-radius:50%;animation:spinner-rotate .8s linear infinite;position:absolute}.spinner.hidden{display:none}@keyframes spinner-rotate{to{transform:rotate(360deg)}}.progress-container{width:120px;height:4px;background:#3b82f633;border-radius:2px;margin-top:20px;overflow:hidden;opacity:1;transition:opacity .3s ease}.progress-container.hidden{opacity:0;pointer-events:none}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:2px;transition:width .2s ease-out}.progress-text{font-size:10px;color:#555;text-transform:uppercase;letter-spacing:2px;margin-top:10px;opacity:1;transition:opacity .3s ease}.progress-text.hidden{opacity:0}.orb.anim-playful{animation:playful .6s ease-in-out infinite!important}.orb.anim-thinking{animation:thinking .25s ease-in-out infinite!important}.orb.anim-scared{animation:scared .1s linear infinite!important}.orb.anim-excited{animation:excited .2s ease-in-out infinite!important}.orb.anim-tired{animation:tired 3s ease-in-out infinite!important}.orb.anim-confused{animation:confused .8s linear infinite!important}@keyframes breathe{0%,to{transform:scale(calc(1 * var(--audio-scale, 1)))}50%{transform:scale(calc(1.1 * var(--audio-scale, 1)))}}@keyframes pulse{0%,to{transform:scale(calc(1 * var(--audio-scale, 1)))}50%{transform:scale(calc(1.2 * var(--audio-scale, 1)))}}@keyframes spin{0%{transform:rotate(0) scale(var(--audio-scale, 1))}to{transform:rotate(360deg) scale(var(--audio-scale, 1))}}@keyframes speak{0%,to{transform:scale(calc(1 * var(--audio-scale, 1)))}50%{transform:scale(calc(1.15 * var(--audio-scale, 1)))}}@keyframes playful{0%,to{transform:translateY(0) scale(calc(1 * var(--audio-scale, 1)))}25%{transform:translateY(-15px) translate(8px) scale(calc(1.05 * var(--audio-scale, 1)))}50%{transform:translateY(0) scale(calc(1.1 * var(--audio-scale, 1)))}75%{transform:translateY(-15px) translate(-8px) scale(calc(1.05 * var(--audio-scale, 1)))}}@keyframes thinking{0%,to{transform:translateY(0) scale(calc(.7 * var(--audio-scale, 1)))}50%{transform:translateY(-20px) scale(calc(.75 * var(--audio-scale, 1)))}}@keyframes scared{0%,to{transform:translate(-2px) scale(var(--audio-scale, 1))}50%{transform:translate(2px) scale(var(--audio-scale, 1))}}@keyframes excited{0%,to{transform:scale(calc(1 * var(--audio-scale, 1)))}25%{transform:scale(calc(1.3 * var(--audio-scale, 1)))}75%{transform:scale(calc(.9 * var(--audio-scale, 1)))}}@keyframes tired{0%,to{transform:scale(calc(1 * var(--audio-scale, 1)));opacity:1}50%{transform:scale(calc(.85 * var(--audio-scale, 1))) translateY(10px);opacity:.6}}@keyframes confused{0%{transform:rotate(0) translate(12px) scale(var(--audio-scale, 1))}25%{transform:rotate(90deg) translate(8px) translateY(-5px) scale(var(--audio-scale, 1))}50%{transform:rotate(180deg) translate(12px) scale(var(--audio-scale, 1))}75%{transform:rotate(270deg) translate(8px) translateY(5px) scale(var(--audio-scale, 1))}to{transform:rotate(360deg) translate(12px) scale(var(--audio-scale, 1))}}.controls{margin-top:60px}.btn{padding:14px 40px;border:2px solid;border-radius:30px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;font-family:Courier New,monospace;text-transform:uppercase;letter-spacing:2px}.btn-connect{background:transparent;border-color:#3b82f6;color:#3b82f6;position:absolute}.btn-connect:hover{background:#3b82f6;color:#0a0a1a;box-shadow:0 0 30px #3b82f699}.btn-disconnect{background:transparent;border-color:#ef4444;color:#ef4444}.btn-disconnect:hover{background:#ef4444;color:#0a0a1a;box-shadow:0 0 30px #ef444499}.btn:disabled{opacity:.3;cursor:not-allowed}@media (max-width: 600px){.orb-container{width:150px;height:150px}.orb{width:80px;height:80px}.spinner{width:30px;height:30px}.agent-embodiment-container{width:200px;height:200px}}.waveform-embodiment{display:flex;align-items:center;justify-content:center;gap:3px;height:100%}.waveform-bar{width:4px;border-radius:2px;transition:height .05s ease-out,background-color .3s ease;will-change:height}.waveform-embodiment-disconnected .waveform-bar{opacity:.3;height:10%!important}.waveform-embodiment-connecting .waveform-bar{opacity:.6;animation:waveform-loading 1s ease-in-out infinite;animation-delay:calc(var(--bar-index) * .1s)}@keyframes waveform-loading{0%,to{height:20%}50%{height:60%}}.waveform-embodiment-anim-pulse{animation:waveform-pulse .5s ease-in-out infinite}@keyframes waveform-pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.5)}}.waveform-embodiment-anim-rainbow .waveform-bar{animation:waveform-rainbow 2s linear infinite;animation-delay:calc(var(--bar-index) * .15s)}@keyframes waveform-rainbow{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}.waveform-embodiment-anim-scatter .waveform-bar{animation:waveform-scatter .6s ease-in-out infinite;animation-delay:calc(var(--bar-index) * .05s)}@keyframes waveform-scatter{0%,to{transform:translateY(0)}50%{transform:translateY(calc((var(--bar-index) - 8) * 3px))}}.waveform-embodiment-anim-bounce .waveform-bar{animation:waveform-bounce .4s ease-in-out infinite;animation-delay:calc(var(--bar-index) * .05s)}@keyframes waveform-bounce{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.3)}}@keyframes orb-embodiment-idle{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.orb-embodiment-idle{animation:orb-embodiment-idle 4s ease-in-out infinite}@keyframes orb-embodiment-listening{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.orb-embodiment-listening{animation:orb-embodiment-listening 1.5s ease-in-out infinite}@keyframes orb-embodiment-thinking{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.orb-embodiment-thinking{animation:orb-embodiment-thinking 1.2s ease-in-out infinite}.orb-embodiment-speaking{animation:none}.orb-embodiment-disconnected{opacity:.3;animation:none}.orb-embodiment-connecting{opacity:.6;animation:orb-embodiment-idle 2s ease-in-out infinite}@keyframes orb-anim-playful{0%,to{transform:translateY(0) translate(0)}25%{transform:translateY(-20px) translate(10px)}50%{transform:translateY(0) translate(0)}75%{transform:translateY(-20px) translate(-10px)}}.orb-embodiment-anim-playful{animation:orb-anim-playful .6s ease-in-out infinite!important}@keyframes orb-anim-thinking{0%,to{transform:translateY(0)}50%{transform:translateY(-25px)}}.orb-embodiment-anim-thinking{animation:orb-anim-thinking .8s ease-in-out infinite!important}@keyframes orb-anim-scared{0%,to{transform:translate(-3px) translateY(0)}25%{transform:translate(3px) translateY(-2px)}50%{transform:translate(-3px) translateY(0)}75%{transform:translate(3px) translateY(2px)}}.orb-embodiment-anim-scared{animation:orb-anim-scared .08s linear infinite!important}@keyframes orb-anim-excited{0%,to{transform:translateY(0);filter:brightness(1)}25%{transform:translateY(-15px);filter:brightness(1.3)}50%{transform:translateY(0);filter:brightness(1.1)}75%{transform:translateY(-10px);filter:brightness(1.2)}}.orb-embodiment-anim-excited{animation:orb-anim-excited .3s ease-in-out infinite!important}@keyframes orb-anim-tired{0%,to{transform:translateY(0);opacity:1}50%{transform:translateY(15px);opacity:.5}}.orb-embodiment-anim-tired{animation:orb-anim-tired 3s ease-in-out infinite!important}@keyframes orb-anim-confused{0%{transform:rotate(0) translate(15px) rotate(0)}25%{transform:rotate(90deg) translate(10px) rotate(-90deg)}50%{transform:rotate(180deg) translate(15px) rotate(-180deg)}75%{transform:rotate(270deg) translate(10px) rotate(-270deg)}to{transform:rotate(360deg) translate(15px) rotate(-360deg)}}.orb-embodiment-anim-confused{animation:orb-anim-confused 1s linear infinite!important}.agent-embodiment-container .cube-embodiment-scene{perspective:600px;perspective-origin:50% 50%}.agent-embodiment-container .cube-face{background:linear-gradient(135deg,#ffffff26,#ffffff0d,#0000001a);border:1px solid rgba(255,255,255,.2)}