body{margin:0;overflow-x:hidden;background:#101921;min-width:320px;min-height:100vh}#webGL{width:100%;max-width:100vw;height:90vh;position:relative;max-height:90vh;z-index:99;overflow:hidden}#navbar{width:100%;height:10vh;background-color:#0f172ae6;display:flex;align-items:center;justify-content:center;z-index:1000;font-size:1.4rem;color:wheat}#content{background-color:#0f172ae6;text-align:center;color:#fff;height:100vh;display:grid;place-content:center}canvas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}#mic-icon-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:10;display:flex;align-items:center;justify-content:center;width:250px;height:250px}#mic-icon-overlay svg{width:100px;height:100px;filter:drop-shadow(0 0 8px #00eaff);z-index:3;position:relative}.microphone-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#1e293bcc,#0f172ae6);display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 20px 60px #06b6d44d,inset 0 2px 20px #ffffff1a,inset 0 -2px 20px #0000004d;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);border:2px solid rgba(6,182,212,.2);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:1000}.microphone-container:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 25px 80px #06b6d466,inset 0 2px 25px #ffffff26;border-color:#06b6d466}.microphone-container.listening{background:radial-gradient(circle at 30% 30%,#06b6d44d,#8b5cf666,#0f172ae6);box-shadow:0 20px 60px #06b6d499,inset 0 2px 20px #fff3;border-color:#06b6d499;animation:micPulse 2s ease-in-out infinite}.mic-icon{width:50px;height:50px;fill:#06b6d4;filter:drop-shadow(0 4px 12px rgba(6,182,212,.6));transition:all .3s ease}.listening .mic-icon{fill:#fff;filter:drop-shadow(0 4px 12px rgba(255,255,255,.8))}.status-indicator{position:absolute;bottom:-150px;left:50%;transform:translate(-50%);color:#64748b;font-size:16px;font-weight:500;text-align:center;transition:all .3s ease;white-space:nowrap}.status-indicator.listening{color:#06b6d4;text-shadow:0 0 10px rgba(6,182,212,.5)}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#64748b;margin-left:8px;transition:all .3s ease}.listening .status-dot{background:#06b6d4;box-shadow:0 0 10px #06b6d4cc;animation:dotPulse 1.5s ease-in-out infinite}@keyframes micPulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.02)}}@keyframes dotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}