.listening-comic[hidden]{display:none}.listening-comic{position:fixed;right:18px;bottom:18px;z-index:65;width:144px;border:2px solid var(--accent);background:var(--panel);border-radius:18px;box-shadow:0 12px 40px #0006;text-align:center;padding:6px 8px 10px;pointer-events:none}.listening-comic svg{width:126px;display:block;margin:auto}.listening-comic strong{font-size:12px;display:block}.comic-head{transform-origin:88px 100px;animation:attentive 1s ease-in-out infinite alternate}.comic-notes{animation:notes 1.2s ease-in-out infinite alternate}.comic-thumb,.comic-mouth-happy{opacity:0}.listening-comic.approved .comic-thumb,.listening-comic.approved .comic-mouth-happy{opacity:1}.listening-comic.approved .comic-mouth-neutral,.listening-comic.approved .comic-notes{opacity:0}.listening-comic.approved .comic-head{animation:none}.listening-comic.approved .comic-thumb{animation:thumb-up .5s ease-out}.mix-completion{max-width:460px;width:calc(100vw - 40px);padding:28px;text-align:center;color:var(--text);background:var(--panel);border:2px solid var(--accent);border-radius:18px;box-shadow:0 20px 80px #0008;overflow:visible}.mix-completion::backdrop{background:#10172099}.completion-tick{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#55dabb;color:#102b23;font-size:40px}.mix-completion h2{font-size:24px;margin:14px 0 8px}.mix-completion p{margin:10px 0}#completionMessage{font-size:19px;font-weight:700;color:var(--accent)}#completionDetail{font-size:13px;color:var(--muted)}#closeCompletion{margin-top:10px}#finishConfetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}#finishConfetti i{position:absolute;left:var(--x);top:-25px;width:9px;height:15px;border-radius:2px;animation:confetti-fall 1.8s var(--delay) ease-in both}@keyframes confetti-fall{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(105vh) rotate(var(--turn));opacity:0}}@keyframes attentive{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}@keyframes notes{from{transform:translateY(4px);opacity:.5}to{transform:translateY(-4px);opacity:1}}@keyframes thumb-up{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:680px){.listening-comic{width:104px;right:10px;bottom:10px;padding:4px}.listening-comic svg{width:96px}.listening-comic strong{font-size:10px}.mix-completion{padding:20px}.mix-completion h2{font-size:21px}}@media(prefers-reduced-motion:reduce){.comic-head,.comic-notes,.comic-thumb,#finishConfetti i{animation:none!important}#finishConfetti{display:none}}