.demo-container{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:80px;background:radial-gradient(circle at center,#111 0,#000 100%)}.demo-container:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity:.05;pointer-events:none;z-index:1}.device-wrapper{position:relative;transform-style:preserve-3d;transition:all .8s cubic-bezier(.2,0,.2,1);animation:floating 6s ease-in-out infinite;z-index:10}@keyframes floating{0%,to{transform:translateY(0) rotateX(10deg) rotateY(-10deg)}50%{transform:translateY(-20px) rotateX(15deg) rotateY(-5deg)}}.device{position:relative;width:320px;height:320px;background:linear-gradient(135deg,#333,#0a0a0a);border-radius:65px;padding:14px;box-shadow:-20px 20px 80px rgba(0,0,0,.9),inset 0 0 2px rgba(255,255,255,.1),0 10px 20px rgba(0,0,0,.5);border:1px solid #222}.device-frame{position:relative;width:100%;height:100%;background:#000;border-radius:50px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:inset 0 0 20px rgba(0,0,0,1)}.side-button{position:absolute;left:-14px;top:30%;width:6px;height:60px;background:linear-gradient(180deg,#444,#222);border-radius:4px 0 0 4px;box-shadow:-2px 0 5px rgba(0,0,0,.5)}.camera-hole{top:18px;left:50%;transform:translateX(-50%);width:10px;height:10px;background:radial-gradient(circle,#0a0a0a 0,#000 100%);box-shadow:inset 0 0 3px rgba(255,255,255,.2),0 0 1px rgba(255,255,255,.1);z-index:10;overflow:hidden}.camera-hole,.camera-hole:after{position:absolute;border-radius:50%}.camera-hole:after{content:"";top:30%;left:30%;width:2px;height:2px;background:rgba(255,255,255,.2)}.device.recording .camera-hole:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:4px;background:#ff0044;border-radius:50%;box-shadow:0 0 10px #ff0044;animation:rec-blink 1s infinite}@keyframes rec-blink{0%,to{opacity:1}50%{opacity:.4}}.scanner{position:absolute;top:-100px;left:0;width:100%;height:120px;background:linear-gradient(180deg,transparent,rgba(139,92,246,.2),transparent);z-index:4;opacity:0;pointer-events:none}.device.scanning .scanner{opacity:1;animation:scanning 2s ease-in-out infinite}@keyframes scanning{0%{top:-120px}to{top:100%}}.screen{position:relative;background:#000;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#camera-feed,.screen{width:100%;height:100%}#camera-feed{position:absolute;top:0;left:0;object-fit:cover;opacity:0;transition:opacity .5s ease;z-index:1;transform:scaleX(-1)}.device.active #camera-feed{opacity:.4}.device.talking #camera-feed{opacity:.2}.screen-content{z-index:2;text-align:center;opacity:0;transition:opacity 1s ease}.device.active .screen-content{opacity:1}.iris-aura{position:absolute;width:250px;height:250px;background:radial-gradient(circle,rgba(139,92,246,.4) 0,transparent 70%);filter:blur(40px);opacity:0;transition:all .8s cubic-bezier(.2,0,.2,1);mix-blend-mode:screen}.device.active .iris-aura{opacity:.6;animation:iris-float 8s ease-in-out infinite alternate}.device.wakeword .iris-aura{opacity:1;animation:iris-wakeup .5s ease-out;filter:blur(30px)}@keyframes iris-wakeup{0%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.5)}to{opacity:.8;transform:scale(1)}}.device.wakeword .screen{background:radial-gradient(circle,rgba(139,92,246,.3) 0,#000 70%)}.device.wakeword .wave-container{opacity:.5}@keyframes iris-float{0%{transform:translate(-10%,-10%) scale(1)}to{transform:translate(10%,10%) scale(1.1);filter:blur(60px)}}.device.talking .iris-aura{animation:iris-talk .3s ease-in-out infinite alternate;opacity:.9}@keyframes iris-talk{0%{transform:translate(0) scale(1.1);filter:blur(40px)}to{transform:translate(0) scale(1.3);filter:blur(80px)}}.wave-container{position:absolute;bottom:0;left:0;width:100%;height:100px;overflow:hidden;opacity:0;transition:opacity 1s ease;transform:translateY(20px)}.device.active .wave-container{opacity:1;transform:translateY(0)}.wave{position:absolute;bottom:-50px;left:-50%;width:200%;height:200px;background:linear-gradient(180deg,transparent,#8b5cf6);border-radius:40%;opacity:.4;animation:wave-run 10s linear infinite}.wave:nth-child(2){animation-duration:7s;opacity:.3;border-radius:35%;background:linear-gradient(180deg,transparent,#4c1d95)}.wave:nth-child(3){animation-duration:5s;opacity:.2;border-radius:45%}@keyframes wave-run{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.bottom-pins{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;gap:15px;opacity:.6}.pin-group{display:flex;gap:4px}.pin{width:3px;height:3px;background:#444;border-radius:50%;box-shadow:inset 0 0 1px #000}.pin.highlight{background:#888;box-shadow:0 0 3px rgba(255,255,255,.2)}.reflection{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 40%,rgba(255,255,255,.02) 50%,transparent);pointer-events:none;z-index:5}.status{font-size:.7rem;font-weight:600;color:#8b5cf6;letter-spacing:4px;margin-bottom:20px;opacity:.8;text-shadow:0 0 10px #8b5cf6}.intention-bar{font-size:.9rem;color:#999}.ui-overlay{margin-top:60px;text-align:center;z-index:10}.ui-overlay h1{font-size:2.5rem;font-weight:600;letter-spacing:8px;margin-bottom:10px}.ui-overlay p{color:#666;font-size:.9rem;margin-bottom:30px}.ui-overlay button{background:transparent;border:1px solid #fff;color:white;padding:12px 30px;font-family:inherit;font-size:1rem;border-radius:30px;cursor:pointer;transition:all .3s ease}.ui-overlay button:hover{background:white;color:black}.mic-indicator{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:8px;opacity:.5;transition:opacity .3s ease}.mic-indicator.active{opacity:1}.mic-dot{width:8px;height:8px;background:#ff4444;border-radius:50%}.mic-indicator.active .mic-dot{background:#44ff44;box-shadow:0 0 10px #44ff44;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}to{transform:scale(1);opacity:1}}.mic-text{font-size:.7rem;letter-spacing:1px;text-transform:uppercase}.device-shadow{position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);width:250px;height:40px;background:radial-gradient(ellipse,rgba(0,0,0,.5) 0,transparent 70%);filter:blur(10px)}.session-info{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:.75rem;color:#666}.session-info .divider{color:#333}.error-message{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:20px;color:#f87171}.error-message,.rate-limit-warning{margin-top:15px;padding:8px 16px;font-size:.75rem}.rate-limit-warning{background:rgba(234,179,8,.1);border:1px solid rgba(234,179,8,.2);border-radius:20px;color:#fbbf24}@media (max-width:768px){.device{width:260px;height:260px;border-radius:50px}.device-frame{border-radius:40px}.ui-overlay h1{font-size:1.8rem;letter-spacing:4px}}