:root{--bg: #00000a;--surface: rgba(4,12,32,.7);--border: rgba(0,140,255,.18);--accent: #0af;--accent-dim: rgba(0,170,255,.4);--text: #e0eeff;--text-dim: rgba(100,180,255,.45);--font-mono: "SF Mono","Fira Code","Consolas",monospace;--font-ui: system-ui,-apple-system,"Segoe UI",sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);overflow:hidden}#app{height:100vh}.layout{display:grid;grid-template-rows:44px 1fr 40px 80px 56px;height:100vh}.hdr{display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--border);background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}.sample-rate{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--accent)}.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;position:relative}.stage:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(0,80,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,80,255,.03) 1px,transparent 1px);background-size:52px 52px;pointer-events:none}.stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,12,.85) 100%);pointer-events:none}.central-wrap{position:relative;z-index:1;width:200px;height:200px}.central-canvas{width:100%;height:100%;display:block}.state-wrap{position:relative;z-index:1}.state-label{font-family:var(--font-mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);transition:color .15s}.state-label[data-state=LISTENING]{color:var(--accent)}.state-label[data-state=SPEAKING]{color:#fff;text-shadow:0 0 12px var(--accent)}.meters{padding:0 20px;display:flex;align-items:center}.bass-meter-wrap{display:flex;align-items:center;gap:10px;width:100%}.bass-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);width:36px;flex-shrink:0}.bass-track{flex:1;height:6px;background:#0050ff1a;border-radius:3px;overflow:hidden}.bass-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#0050ff,#0af);width:0%;transition:width .04s linear}.bass-value{font-family:var(--font-mono);font-size:11px;color:var(--accent);width:28px;text-align:right;flex-shrink:0}.strip-wrap{padding:0 20px;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.freq-strip{display:block;width:100%;height:100%}.mic-bar{display:flex;align-items:center;justify-content:center;gap:16px;padding:0 20px;background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.mic-btn{background:#0050dc1a;border:1px solid rgba(0,160,255,.4);color:#7dd3fc;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:9px 28px;cursor:pointer;transition:all .2s;border-radius:2px}.mic-btn:hover:not(:disabled){border-color:#00dcffd9;color:#fff;box-shadow:0 0 16px #00b4ff33}.mic-btn.live{border-color:var(--accent);color:#fff;box-shadow:0 0 14px var(--accent-dim),inset 0 0 14px #0050ff14}.mic-btn:disabled{opacity:.5;cursor:not-allowed}.mic-status{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);transition:color .2s}.mic-status[data-state=requesting]{color:#fbbf24}.mic-status[data-state=granted]{color:var(--accent)}.mic-status[data-state=denied]{color:#f87171}body:before,body:after{content:"";position:fixed;width:18px;height:18px;z-index:100;pointer-events:none}body:before{top:8px;left:8px;border-top:1.5px solid rgba(0,180,255,.4);border-left:1.5px solid rgba(0,180,255,.4)}body:after{bottom:8px;right:8px;border-bottom:1.5px solid rgba(0,180,255,.4);border-right:1.5px solid rgba(0,180,255,.4)}