.al-mic{ position:absolute; inset:0; pointer-events:none; }
.al-mic-btn{ position:absolute; pointer-events:auto; touch-action:none; border-radius:50%; }
.al-mic-face{ position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 36% 30%,#ff9a9a 0,#ea2f38 45%,#a1111b 100%); box-shadow:0 8px 0 rgba(0,0,0,.28), inset 0 0 0 6px #fff;
  transition:transform .08s, filter .25s, opacity .25s, background .25s, box-shadow .25s; }
.al-mic-face img{ width:38%; height:38%; object-fit:contain; transform:translateY(16%); pointer-events:none; transition:opacity .25s; }   
.al-mic-btn.down .al-mic-face{ transform:scale(.93); }
.al-mic-btn.shut .al-mic-face{ filter:grayscale(1) brightness(1.08); opacity:.55; }                 
.al-mic-kw{ position:absolute; inset:0; pointer-events:none; transition:opacity .25s; }
.al-mic-btn.shut .al-mic-kw{ opacity:.55; }
.al-mic-kw svg{ display:block; overflow:visible; transition:transform .08s; }
.al-mic-kw text{ fill:#fff; font-family:var(--font-read); font-weight:800; letter-spacing:.2em; text-transform:uppercase; }   
.al-mic-ring{ position:absolute; pointer-events:none; overflow:visible; }
.al-mic-bars{ position:absolute; width:132px; height:80px; display:flex; align-items:flex-end; gap:6px; pointer-events:none; opacity:0; transition:opacity .15s; }
.al-mic-bars.live{ opacity:1; }
.al-mic-bars i{ width:12px; border-radius:6px; background:linear-gradient(#ffe066,#ff8a3d); height:10px; }