html,body,#root{width:100%;height:100%}:root{color:#dff8ff;background:#020711;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow:hidden}button,input{font:inherit}.shell{background:radial-gradient(circle at 50% 45%,#19bfff2e,#0000 34%),linear-gradient(135deg,#14ffda14,#0000 28%),#020711;width:100vw;height:100vh;position:relative;overflow:hidden}.shell:before{content:"";background-image:linear-gradient(#46dcff0f 1px,#0000 1px),linear-gradient(90deg,#46dcff0f 1px,#0000 1px);background-size:42px 42px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000,#0000 78%);mask-image:radial-gradient(circle,#000,#0000 78%)}.hero{place-items:center;display:grid;position:absolute;inset:0}.canvas{filter:drop-shadow(0 0 48px #22cdff57);width:min(68vw,820px);height:min(68vw,820px)}.rings,.rings:before,.rings:after{content:"";pointer-events:none;border:1px solid #4fe0ff47;border-radius:50%;width:min(58vw,700px);height:min(58vw,700px);animation:18s linear infinite spin;position:absolute}.rings:before{border-style:dashed;width:86%;height:86%;animation-duration:11s;inset:7%}.rings:after{border-color:#7079ff42;width:66%;height:66%;animation-duration:8s;animation-direction:reverse;inset:17%}.is-listening .rings,.is-listening .rings:before,.is-listening .rings:after{filter:drop-shadow(0 0 24px #37ffd347);border-color:#37ffd394;animation-duration:5.5s}@keyframes spin{to{transform:rotate(360deg)}}@keyframes listen-pulse{0%,to{box-shadow:0 0 28px #2ae2ff2e,0 0 #2be1ff52}50%{box-shadow:0 0 54px #2ae2ff6b,0 0 0 13px #2be1ff00}}@keyframes live-dot{0%,to{opacity:.55;transform:scale(.78)}50%{opacity:1;transform:scale(1.22)}}.status{letter-spacing:.12em;text-transform:uppercase;background:#0414269e;border:1px solid #48dbff73;border-radius:999px;align-items:center;gap:8px;padding:10px 18px;display:flex;position:absolute;top:8vh;box-shadow:0 0 35px #22cdff2e}.is-listening .status{color:#d9fff8;background:#072a30c2;border-color:#37ffd3b8;animation:1.25s ease-in-out infinite listen-pulse}.listening-badge{z-index:5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none;background:linear-gradient(135deg,#073a43db,#081223c2);border:1px solid #46ffd594;border-radius:999px;align-items:center;gap:14px;min-width:290px;padding:15px 20px;display:inline-flex;position:absolute;bottom:24vh;left:50%;transform:translate(-50%);box-shadow:0 0 44px #2cecff3d,inset 0 0 28px #40ffda12}.listening-badge b{color:#9ffff0;letter-spacing:.22em;font-size:13px;display:block}.listening-badge small{color:#d9fffb;letter-spacing:.01em;margin-top:2px;font-size:13px;display:block}.live-dot{background:#38ffd5;border-radius:50%;width:13px;height:13px;animation:.9s ease-in-out infinite live-dot;box-shadow:0 0 18px #38ffd5e6}.panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));background:linear-gradient(#081c32bf,#030c188c);border:1px solid #4cdaff59;width:330px;max-height:68vh;padding:22px;position:absolute;top:7vh;box-shadow:0 0 40px #00d1ff1f,inset 0 0 28px #00d1ff0d}.left{left:4vw}.right{right:4vw}h1{color:#79ecff;letter-spacing:.12em;margin:0;font-size:28px}h2{color:#bff8ff;align-items:center;gap:8px;margin:0 0 16px;display:flex}.sub{color:#78aabd;margin:4px 0 24px}.metric{color:#a9ddea;border-bottom:1px solid #78e1ff21;align-items:center;gap:10px;padding:13px 0;display:flex}.metric svg{color:#55dfff}.metric b{color:#fff;margin-left:auto}.quick{gap:10px;margin-top:22px;display:grid}button{color:#dffaff;cursor:pointer;background:#0d324e8c;border:1px solid #50ddff6b;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:11px 13px;display:inline-flex}button:hover{background:#237fa99e;box-shadow:0 0 22px #23d2ff2e}.voice-button.recording{color:#f1fffd;background:linear-gradient(135deg,#148076c7,#154465b8);border-color:#39ffd6c7;animation:1.1s ease-in-out infinite listen-pulse}.voice-button.recording svg{color:#63ffe1;filter:drop-shadow(0 0 8px #63ffe1b3)}button:disabled{opacity:.45;cursor:not-allowed}.logs{gap:9px;max-height:56vh;padding-right:4px;display:grid;overflow:auto}.log{color:#b9e8f2;background:#04101e85;border:1px solid #50ddff24;grid-template-columns:74px 80px 1fr;gap:8px;padding:9px;font-size:12px;display:grid}.log span{color:#719cac}.log b{color:#5fe6ff}.console{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#030e1cb8;border:1px solid #5ae4ff5c;gap:10px;width:min(980px,86vw);padding:16px;display:grid;position:absolute;bottom:5vh;left:50%;transform:translate(-50%);box-shadow:0 0 50px #00c8ff29}.caption{color:#c6edf5;min-height:32px;line-height:1.55}.caption b{color:#57e3ff;margin-right:10px}.answer{color:#f0fdff}.inputbar{grid-template-columns:120px 1fr 120px;gap:10px;display:grid}input{color:#fff;background:#000812b8;border:1px solid #55deff59;border-radius:12px;outline:none;width:100%;padding:0 14px}input:focus{box-shadow:0 0 0 2px #3cd7ff2e}@media (width<=1050px){.panel{width:280px;font-size:13px}.right{display:none}.canvas{width:92vw;height:92vw}}