*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#06061e;--surface:#ffffff0a;--border:#ffffff14;--dim:#ffffff73;--azure:#2db7f5;--brand:#265398;--c-idle:#6366f1;--c-listen:#06b6d4;--c-speak:#8b5cf6;--font-u:"Inter", system-ui, sans-serif;--font-d:"Outfit", system-ui, sans-serif}html,body{background:var(--bg);color:#fff;height:100%;font-family:var(--font-u);-webkit-font-smoothing:antialiased;overflow:hidden}.bg-layer{z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 40%, #26539840, transparent 70%), radial-gradient(ellipse 50% 40% at 50% 80%, #2db7f514, transparent 60%), var(--bg);position:fixed;inset:0}.bg-grid{background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;mask-image:radial-gradient(70% 60%,#000 20%,#0000 80%)}.bg-glow{filter:blur(40px);background:radial-gradient(#2db7f51f,#0000 70%);width:60vw;height:30vh;position:absolute;bottom:10%;left:50%;transform:translate(-50%)}.app{z-index:1;flex-direction:column;height:100dvh;display:flex;position:relative}.hdr{flex-shrink:0;justify-content:space-between;align-items:center;padding:20px 28px;display:flex}.hdr-logo{color:#ffffffd9;font-family:var(--font-d);align-items:center;gap:10px;font-size:15px;font-weight:500;text-decoration:none;display:flex}.hdr-logo-box{background:linear-gradient(135deg, var(--brand), var(--azure));border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.hdr-badge{letter-spacing:.6px;color:var(--dim);text-transform:uppercase;background:var(--surface);border:1px solid var(--border);border-radius:99px;align-items:center;gap:8px;padding:6px 14px;font-size:12px;font-weight:500;display:flex}.hdr-dot{background:var(--azure);width:6px;height:6px;box-shadow:0 0 8px var(--azure);border-radius:50%;animation:2s infinite pulse}.hdr-exit{color:var(--dim);border-radius:8px;align-items:center;gap:6px;padding:8px 14px;font-size:13px;text-decoration:none;transition:all .2s;display:flex}.hdr-exit:hover{color:#fff;background:#ffffff0d}.stage{flex-direction:column;flex:1;justify-content:center;align-items:center;padding:0 24px 28px;display:flex;position:relative;overflow:hidden}.intro{text-align:center;margin-bottom:24px;transition:opacity .6s,transform .6s cubic-bezier(.16,1,.3,1)}body[data-state=listening] .intro,body[data-state=speaking] .intro{opacity:.5;transform:translateY(-8px)}.title{font-family:var(--font-d);letter-spacing:-1.5px;margin-bottom:8px;font-size:clamp(32px,5vw,52px);font-weight:200;line-height:1.1}.title b{background:linear-gradient(135deg, #fff 20%, var(--azure));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:500}.subtitle{font-family:var(--font-d);color:var(--dim);letter-spacing:.3px;font-size:16px;font-weight:300}.agent-viewport{flex-shrink:0;width:min(520px,92vw);height:min(480px,55vh);position:relative}.agent-canvas-wrap{background:radial-gradient(80% 70% at 50% 45%,#26539826,#0000 70%);border:1px solid #ffffff0f;border-radius:24px;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 60px #2db7f50a,0 24px 60px #00000080}.agent-canvas-wrap canvas{display:block;width:100%!important;height:100%!important}.agent-loading{z-index:5;backdrop-filter:blur(6px);color:#ffffff80;letter-spacing:.3px;background:#06061ebf;flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:13px;transition:opacity .5s;display:flex;position:absolute;inset:0}.agent-loading.is-hidden{opacity:0;pointer-events:none}.agent-loading-ring{border:2px solid #ffffff14;border-top-color:var(--azure);border-radius:50%;width:36px;height:36px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.agent-hud{z-index:10;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:16px;left:16px;right:16px}.agent-hud-live{letter-spacing:1px;color:#fff6;backdrop-filter:blur(8px);background:#00000059;border:1px solid #ffffff0f;border-radius:6px;align-items:center;gap:6px;padding:5px 10px;font-size:10px;font-weight:600;transition:all .4s;display:flex}.agent-hud-live.is-active{color:var(--mujib-blue);border-color:#2db7f540;box-shadow:0 0 20px #2db7f526}.hud-dot{background:#ffffff4d;border-radius:50%;width:5px;height:5px;transition:background .4s,box-shadow .4s}.agent-hud-live.is-active .hud-dot{background:var(--azure);box-shadow:0 0 8px var(--azure);animation:1.5s infinite pulse}.agent-hud-status{color:#ffffff8c;backdrop-filter:blur(8px);background:#00000059;border:1px solid #ffffff0f;border-radius:6px;padding:5px 12px;font-size:12px}.agent-reflection{filter:blur(12px);pointer-events:none;background:radial-gradient(#2db7f526,#0000 70%);height:40px;position:absolute;bottom:-20px;left:10%;right:10%}body[data-state=listening] .agent-canvas-wrap{border-color:#06b6d433;box-shadow:inset 0 0 80px #06b6d40f,0 24px 60px #00000080,0 0 60px #06b6d414}body[data-state=speaking] .agent-canvas-wrap{border-color:#8b5cf640;box-shadow:inset 0 0 80px #8b5cf614,0 24px 60px #00000080,0 0 80px #8b5cf61a}.ctrl{z-index:20;flex-direction:column;align-items:center;gap:14px;margin-top:28px;display:flex}.ctrl-label{font-family:var(--font-d);color:var(--dim);letter-spacing:.3px;font-size:14px;font-weight:300}.ctrl-hint{color:#ffffff40;letter-spacing:.2px;font-size:11px}.ctrl-activate{color:#ffffffd9;font-family:var(--font-d);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1f;border-radius:99px;align-items:center;gap:10px;padding:14px 28px;font-size:15px;font-weight:400;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex}.ctrl-activate:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-2px)}.ctrl-activate.is-active{background:linear-gradient(135deg,#26539880,#2db7f540);border-color:#2db7f559;box-shadow:0 0 40px #2db7f526}.ctrl-activate-icon{width:32px;height:32px;color:var(--mujib-blue);background:#2db7f526;border-radius:50%;justify-content:center;align-items:center;display:flex}.ctrl-activate.is-active .ctrl-activate-icon{animation:2s infinite pulse}.chips{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:auto;padding-top:16px;display:flex}.chip{border:1px solid var(--border);color:var(--dim);cursor:pointer;font-size:12px;font-weight:400;font-family:var(--font-u);background:0 0;border-radius:99px;padding:8px 16px;transition:all .25s}.chip:hover{background:var(--surface);color:#fff;border-color:#ffffff26}.chip.is-active{color:var(--mujib-blue);background:#2db7f514;border-color:#2db7f559}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.hdr-dot,.ctrl-activate.is-active .ctrl-activate-icon,.agent-hud-live.is-active .hud-dot{animation:none}}@media (width<=768px){.hdr{padding:16px 20px}.hdr-badge{display:none}.agent-viewport{height:min(420px,50vh)}.title{font-size:28px}.intro{margin-bottom:16px}}